带有plus的CSS菜单

我有一个css精灵的问题，我知道最好的方式做精灵，但这种方式不适用于我需要做的这个菜单

CSS代码

/* SUB MENU
----------------------------------------------------------*/
div#sub-menu{
    position: relative;
    float: left;
    width: 211px;
    padding: 50px 0px 0px;
    z-index: 999;
}
div#sub-menu p{
    font-size: 15px;
    text-transform: uppercase;
    line-height: 25px;
    padding: 0px 36px;
    margin-bottom: 25px;
}
div#sub-menu ul li{
    height: 29px;
    margin: 2px 21px;
    border-bottom: 1px #353535 solid;
}
div#sub-menu ul li:first-child{
    border-top: 1px #353535 solid;
    padding-bottom: 2px;
}
div#sub-menu ul li:first-child a{
    margin: 2px 0px 3px;
}
div#sub-menu ul li a{
    display: list-item;
    width: 138px;
    height: 11px;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    padding: 8px 15px;
}
div#sub-menu ul li a:hover{
    background: #f9c600;
    color: #fff;
}

HTML代码

普罗杜托斯

我需要菜单有最后的加号，当我们将它悬停在a标签内时，我可以给我使用的精灵，如果需要的话

有人能帮我吗

所需的最终结果：

---

您可以使用css3

：：在

之后，这样您就可以添加这个

div#sub-menu ul li a::after{
    content:'+';
    color:#000;
    float:right;
    font-size:14px;
    line-height:10px;
}

div#sub-menu ul li a:hover::after{
    color:#fff;
}

演示：使用：after（或：before）伪类-

这就是我要补充的全部内容：

div#sub-menu ul li a{
    position: relative;
}

div#sub-menu ul li a:after {
    content: "+";
    position: absolute;
    right: 0.5em;
}

“+”符号是一个常用符号，因此不需要使用精灵，但如果必须同时使用：before和：after，则可以同时使用。这会使标记稍微长一点

---

在你的CSS中，你实际上在哪里尝试使用背景精灵？接下来：为什么你需要一个精灵来完成你在截图中展示的设计？看起来您可以使用直接的CSS来完成这一点。我尝试了：after，但没有成功，那么：after和：：after之间的区别是什么？我觉得是一样的，所以我试了一下：之后，它起作用了-奇怪，因为我试过了，它什么也没给我看，也许我做了一些不让它被展示出来的事情，好吧，这是很多帮助。

div#sub-menu ul li a{
    position: relative;
}
div#sub-menu ul li a:before,
div#sub-menu ul li a:after {
    content: "";
    position: absolute;
    right: 0.5em;
    width: 10px;
    height: 10px;
}

div#sub-menu ul li a:before {
    background: red;    
}
div#sub-menu ul li a:after {
    background: green;
    opacity: 0;
}


div#sub-menu ul li a:hover:before {
    opacity: 0;
}
div#sub-menu ul li a:after {
    opacity: 1;
}