get image from sprite and add into a href - html

Question

I've added all my icons into a sprite.
Now, I need to show one icon from that sprite with a link.
When I add the sprite and set its background position on the link all of the link's background is the sprite sprite.
a{
background-image:url('sprite.png');
}
.sprite_link_icon{
padding-left: 20px;
background-position: -36px -10px
}
<a class="sprite_link_icon" href="">test link test</a>
How do I set the sprite's width and height, so that it shows only one icon?
Is the only way to add two divs in the "a" tag? First, the div with sprite icon and width and height set, and in the other text?
<a href="">
<div class="sprite_link_icon" style="width: 10px; height: 10px;"></div>
<div>test link</div>
</a>

Answer 1

You could use :before or :after to move the actual background to another (pseudo-)element that is exactly the right size of one icon.
Something like this:
.icon {
/* nothing special here, just a dynamic element,
maybe with a fixed height? */
}
.icon:before {
content: '';
display: inline-block;
height: 16px;
width: 16px;
background: url(...) etc;
margin-right: .25em; /* might not be necessary due to inline-block */
}
A fiddle: http://jsfiddle.net/rudiedirkx/RG3Kd/ (with wrong sizes, because I don't have a good sprite handy).

Answer 2

You can't do it like, when you are doing sprites you should have mind how much will the width and the height of the element will be.
You can get out of the problem when you add a span in the "a" tag and add the backgroud to it, with specific width and height. Or you can rearrange your sprite.

Answer 3

Use this code in style:
a
{
background-color:#00cc00;
padding-left:20px;
}
a span
{
background-color:#fff;
}
then this html:
<span>test link</span>