How do I use a sprite to the right of text with an unknown width?

Question

Given the following example: http://cl.ly/2UAa

How do I use a sprite on the right side of the "see more..." line so that it always adjusts with the width of the text? Should I create a separate element that will float with the text, or is there a way to do it directly within the link.

Answer 1

You can apply it to the background of the link, align it right and give the link a right padding.

a {
    background: url(image_url) no-repeat right center;
    padding-right: 80px;    // 80 pixels example
}

Answer 2

My favorite method is to use a pseudo element and set the image as content;

a:after {
    content: url(path/to/image.png);
}

You can also create a pseudo element before an element, or use text instead of an image as content;

a:before {
    content:' \25BA';
}

\25BA is the CSS escape character for a right pointing arrow, but you can put any text in quotes.

Of course, you can also use the background method as jeroen suggested, and both methods are useful for different situations.