add an image to a link with CSS - possible?

I have a part of a page which contains text links to other subpages:



Now, I'd like each link to contain a tiny image after each text:




Is it possible to do something similar with CSS only?

Something like:

a:after { content: blah_image }

Which would add an image after each link?



--
Tomasz Chmielewski
http://wpkg.org

Re: add an image to a link with CSS - possible?

Tomasz Chmielewski wrote:

> Is it possible to do something similar with CSS only?
>
> Something like:
>
> a:after { content: blah_image }

Yes, you can do that -- and that's almost the exact syntax. Try:

a:after { content: url('example.png'); }

While the CSS spec seems to imply that in this case, the inserted image
should form part of the clickable area too. But it's a little vague about
this.

However, you might achieve better browser support by instead using a
right-aligned non-repeating background image on elements and adding a
little padding so that the anchor text doesn't overlap the image. This
will give a similar appearance, but should be more reliable.

--
Toby A Inkster BSc (Hons) ARCS
[Geek of HTML/SQL/Perl/PHP/Python/Apache/Linux]
[OS: Linux 2.6.17.14-mm-desktop-9mdvsmp, up 21:58.]

It'll be in the Last Place You Look
http://tobyinkster.co.uk/blog/2007/11/21/no2id/