Меню CSS с плюсом

#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-КОД

<div id="sub-menu"> <p>Produtos</p> <ul> <li><a href="arroz">arroz</a></li> <li><a href="azeite">azeite</a></li> <li><a href="especiarias">especiarias</a></li> </ul> </div>

Мне нужно, чтобы в меню был этот последний плюс, и все равно, когда мы наводим курсор, он находится внутри тега a, я могу указать спрайт, который я использую, если это необходимо.

Кто-нибудь может мне помочь в этом, пожалуйста?

Требуется конечный результат: введите описание изображения здесь

JSFiddle

1. Где в вашем CSS вы на самом деле пытаетесь использовать фоновый спрайт? В качестве продолжения: зачем вам нужен спрайт для создания дизайна, который вы показываете на скриншоте? Похоже, вы можете добиться этого, используя прямой CSS.

Ответ №1:

Вы можете использовать css3 ::after , чтобы просто добавить это

 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;
}

ДЕМОНСТРАЦИЯ: http://jsfiddle.net/P3Nq5/4 /

1. Я пробовал с:after и не сработал, в чем разница между:after и ::after ? O.o

2. Я думаю, что это то же самое, поэтому я попробовал с помощью:after, это работает — jsfiddle.net/P3Nq5/8

3. Странно, потому что я попробовал это, и это мне вообще ничего не показало, может быть, я сделал что-то, что не позволило это показать, ну, это много для помощи.

Ответ №2:

Используйте псевдокласс :after (или :before) — http://jsfiddle.net/michaelburtonray/P3Nq5/2 /

Это все, что мне нужно было добавить:

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

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

Символ » » является обычным символом, поэтому вам не нужно использовать спрайт, но при необходимости вы можете использовать оба :before и :after вместе. Это делает разметку немного длиннее.

http://jsfiddle.net/michaelburtonray/P3Nq5/7/

 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;
}