Posted by Toby A Inkster on 11/23/07 17:07

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 <a> 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/

• Next in forum: Re: Flicker
• Prev in forum: Re: IE cannot open the Internet site ... Operation aborted
• Thread view: Re: add an image to a link with CSS - possible?

[Reply to this message]