2 replies [Last post]
lowiepete
Offline
newbie
Lowestoft, Suffolk, UK
Last seen: 9 years 2 weeks ago
Lowestoft, Suffolk, UK
Joined: 2006-11-08
Posts: 7
Points: 0

Hello Folks,

I've been experimenting with this bit of CSS to place an external
link indicator image at the end of relevant link text.

a.ext { background: url(img/outlnk.gif) no-repeat top right; padding-right: 15px; }

a.ext:hover
{
background: #008C46 url(img/outlnk.gif) no-repeat top right;
padding-right: 15px;
}

It works well for text links where no line break occurs. What I'd like
to be able to do is have it work in all situations, not only with line
breaks, but also with link text placed below a hyperlinked image.

Is this possible with CSS?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

For links with images in

For links with images in them (or text links with line breaks), you could wrap the text to have the icon in a span and attach the icon to the span instead of the anchor e.g.:

a.ext, span.ext { background: url(img/outlnk.gif) no-repeat top right; padding-right: 15px; }

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

lowiepete
Offline
newbie
Lowestoft, Suffolk, UK
Last seen: 9 years 2 weeks ago
Lowestoft, Suffolk, UK
Joined: 2006-11-08
Posts: 7
Points: 0

Solved! Many thanks!

Quote:
and attach the icon to the span instead of the anchor

Now, why didn't I think of that! (?)

Many thanks - I love CSS!

I've now got a trial page up. Scroll down to 10 November to see both formats.