CSS Sprite 菜单图标，最少只有一个元素 HTML 使用 ：before 伪元素

总结/概括

是否可以在一个HTML <a>元素中包含一个全宽(显示:块)可单击的超链接HTML元素，该元素具有唯一的定位sprite背景图像类？

Background

目前，我有一个精心制作的HTML菜单，每个超链接都有自己独特的图标精灵背景位置.

精灵图标每个都有自己独特的类，该类添加在默认的menu类之上，该类包含背景url和总体布局.所有图标大小完全相同，13 x 13像素.每个超链接都有一个完整的with using display:block.鼠标悬停必须在块宽度悬停后立即激活，以便短文本或长文本超链接获得相等的全宽悬停 colored颜色 .

精灵CSS

.home  {background-position:0 -13px}
.about {background-position:0 -1638px}
.ethos {background-position:0 -2944px}
.etcet {background-position:0 -5611px}

通用CSS

li a{
    display: block;
    line-height: 2em;
    color: black;
    padding: 10px 1em 10px 2em;
    }

.menu{
    display: inline-block;
    background: url(icons.png) no-repeat;
    width: 13px; height: 13px;
    vertical-align: middle;
    margin: -2px 15px 0px -29px;
}

目前，以下不希望出现的臃肿HTML标记可以正常工作...

Undesired: Bloated HTML

<li>
   <a href="/home">
      <p class="menu home"></p> Home
   </a>
</li>

... 但我想知道是否有可能将其(在不损失任何基本功能的情况下)减少到绝对最小的HTML:

Desired: Minimal HTML

<a href="/home" class="home">Home</a>

新CSS

a{
    position: relative;
    padding: 0 0 0 1em;
}

a:before{
    content:'';
    position: absolute;
    background-image: url(icons.png);
    background-repeat: no-repeat;   
    top: .75em;
    left: 2px;
    height: 13px;
    width: 13px;
}

Stuck setting the unique background-position

我try 了a:before{}种解决方法，虽然背景图标框相对于超链接的位置很好，并且全宽鼠标悬停也很有效，但精灵本身都是从背景图像的x=0 y=0的初始起始轴开始的！

换句话说，所有精灵图标都取自精灵背景png文件的第一块.当使用a:before{}时，background-position似乎没有使用唯一的单独类名.

如果我将背景图像从a:before{}移到a{}，则布局完全无法修复.

总之，有没有一种方法可以让一个元素的HTML与超链接上的精灵一起工作，只使用a:before{}个元素，而不需要任何额外的无意义的HTML元素，如<spans>或<p>，并实现精灵定位的所有基本要素和完全的块悬停性？

非常感谢您的帮助！