Переместить CSS-спрайт в div?

Question

То, что я пытаюсь сделать, это иметь спрайт в качестве фона для моих ссылок. Затем, когда он зависает, он меняется на другой цветной спрайт. Следующий код выполнил это.

Проблема заключается в том, что спрайты находятся непосредственно над текстом ссылки. Есть ли способ позиционировать, где спрайт показан по отношению к тексту?

Если я изменю background-position, это просто изменит, какие пиксели используются для спрайта, а не фактическое положение спрайта. Заранее спасибо!

HTML

<a class="sprite-link" href="#">Link Text</a> 

CSS

a:hover { 
color: black; 
} 

.sprite-link { 
background: url(spriteurl.png) no-repeat; 
background-position: 0px 0px; 
width: 165px; 
height: 45px; 
display: block; 
} 

.sprite-link:hover { 
background: url(spriteurl.png) no-repeat; 
background-position: 0px -45px; 
width: 165px; 
height: 45px; 
} 

Answer 1

Вы можете использовать ::after псевдо-элемент для достижения этой цели ...

Проверьте Fiddle.

У меня нет спрайта, но представьте, что квадрат в этом примере.

CSS

.sprite-link::after { 
    content: ""; 
    padding: 10px; 
    background: red; 
    width: 165px; 
    height: 45px; 
    display: block; 
} 

.sprite-link:hover::after { 
    width: 165px; 
    height: 45px; 
    background: black; 
} 

Answer 2

Используйте абсолютно позиционированный псевдо элемент и поместить спрайт внутри элемента псевдо.

Например (см скрипку):

a { position: relative; padding-right: 30px; display: inline-block;} 
a:before { content:""; border: 1px solid #000; display: inline-block; position: absolute; width: 20px; height: 20px; right:0; } 

http://jsfiddle.net/XJZfC/

Answer 3

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

HTML

<a class="sprite-link"> 
    <span></span> 
    Link Text 
</a> 

CSS

a:hover { 
    color: black; 
} 

.sprite-link > span { 
    background: url(spriteurl.png) no-repeat; 
    background-position: 0px 0px; 
    width: 165px; 
    height: 45px; 
    display: inline-block; 
} 

.sprite-link:hover > span { 
    background: url(spriteurl.png) no-repeat; 
    background-position: 0px -45px; 
}