add an image to a link with CSS - possible?

[Tomasz Chmielewski]

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

<a href="subpage.html">Subpage</a>

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

<a href="subpage.html">Subpage<img src="arrow.png"></a>


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?

 

[Toby A Inkster]

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/

 

[Jonathan N. Little]

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

<a href="subpage.html">Subpage</a>

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

<a href="subpage.html">Subpage<img src="arrow.png"></a>


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?

no because generated content is just play text, no html. What you can do
is make a special class with the image as a background and using
padding to show the arrow.

/* arrow.png is say 10x10px */

a.subpage{
padding-right: 12px;
background: transparent url(arrow.png) no-repeat top right;
}

<a href="subpage.html" class="subpage">Subpage</a>

 

[Ben C]

no because generated content is just play text, no html.

[...]

You can generate images with, e.g.:

content: url("blah.png");

You also should be able to do:

a:after
{
content: "";
background-image: url("blah.png");
}

 

[Jonathan N. Little]

no because generated content is just play text, no html.

[...]

You can generate images with, e.g.:

content: url("blah.png");

You also should be able to do:

a:after
{
content: "";
background-image: url("blah.png");

}

Ah, yes I remember seeing that was how your can get around the "no html"
for generated content problem, at least for images. Hmmm could you do a
funky CSS include? element:after { content: url(someinclude.html); }?

Nope doesn't seem to work. Good thing, if it did it is a scary thought
how how one could abuse it!

To OP though, my background image method will work in IE, the generated
content methods will not.

 

[Tomasz Chmielewski]

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

<a href="subpage.html">Subpage</a>

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

<a href="subpage.html">Subpage<img src="arrow.png"></a>


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?
no because generated content is just play text, no html.

[...]

You can generate images with, e.g.:

content: url("blah.png");

You also should be able to do:

a:after
{
content: "";
background-image: url("blah.png");

}

Ah, yes I remember seeing that was how your can get around the "no html"
for generated content problem, at least for images. Hmmm could you do a
funky CSS include? element:after { content: url(someinclude.html); }?

Nope doesn't seem to work. Good thing, if it did it is a scary thought
how how one could abuse it!

To OP though, my background image method will work in IE, the generated
content methods will not.

Oh, this is getting problematic for me.

All content is generated with a CMS engine, and adding a class="subpage"
to each link element which needs an arrow is a bit hard for
non-technical people.

So, let's say the page looks like that - and I would like to add these
tiny images to div with id="arrows":

<div id="normal">
<a href="normal.html">Normal link</a>
</div>
<div id="arrows">
<a href="subpage.html">Link with an arrow image</a>
</div>


How should my CSS look like? I'm trying to achieve it for some time now,
with no success.

 

[Tomasz Chmielewski]

Tomasz Chmielewski schrieb:

(...)

How should my CSS look like? I'm trying to achieve it for some time now,
with no success.

So, this is almost the one I was looking for:

#arrows a {
padding-right: 20px;
background: url(arrow.png) no-repeat center right;
content: "";
}


It works with IE (at least with IE7), but fails miserably with Konqueror
- there are no links, only images

 

[Tomasz Chmielewski]

Tomasz Chmielewski schrieb:

(...)



So, this is almost the one I was looking for:

#arrows a {
padding-right: 20px;
background: url(arrow.png) no-repeat center right;
content: "";
}


It works with IE (at least with IE7), but fails miserably with Konqueror
- there are no links, only images

The 'content: "";' was confusing Konqueror - with this one, it looks
fine in Firefox, IE7 and Konqueror:

#arrows a {
padding-right: 20px;
background: url(arrow.png) no-repeat center right;
}

Thanks all for help!

 

[Jonathan N. Little]

Tomasz Chmielewski schrieb:

(...)

Well firstly you was want to use CLASS not ID. With ID you can only have
2 links per page "normal" and "arrows" because all IDs must be unique.
So use CLASS.

So, this is almost the one I was looking for:

#arrows a {

This is incorrect anyway, this means an A element *within* another
element with an ID of "arrows". Should should been: a#arrows {...}

padding-right: 20px;
background: url(arrow.png) no-repeat center right;
content: "";

^^^^^^^^^^^^^^^^
You don't need this. This is if you were inserting the image as content.
You are not, it's a background.

}


It works with IE (at least with IE7), but fails miserably with Konqueror
- there are no links, only images

a.arrows{
padding-right: 20px;
background: url(arrow.png) no-repeat center right;
}

<div class="arrows">
<a href="subpage.html">Link with an arrow image</a>
</div>

 

[Tomasz Chmielewski]

Well firstly you was want to use CLASS not ID. With ID you can only have
2 links per page "normal" and "arrows" because all IDs must be unique.
So use CLASS.


This is incorrect anyway, this means an A element *within* another
element with an ID of "arrows".

So, below an A element is within a DIV element with an ID of arrows,
isn't it?

<div id="normal">
<a href="normal.html">Normal link</a>
</div>
<div id="arrows">

Should should been: a#arrows {...}

If I set it this way, it doesn't work (for id, at least, I didn't check
with class).

a.arrows{
padding-right: 20px;
background: url(arrow.png) no-repeat center right;
}

<div class="arrows">
<a href="subpage.html">Link with an arrow image</a>
</div>

But I want to use id (I parse some elements with JavaScript).

 

[Ben C]

Tomasz Chmielewski schrieb: [...]
#arrows a {
padding-right: 20px;
background: url(arrow.png) no-repeat center right;
content: "";
}


It works with IE (at least with IE7), but fails miserably with Konqueror
- there are no links, only images

The 'content: "";' was confusing Konqueror - with this one, it looks
fine in Firefox, IE7 and Konqueror:

#arrows a {
padding-right: 20px;
background: url(arrow.png) no-repeat center right;
}

You don't need content: "" anyway-- that's not a :before or :after
selector.

 

[Jonathan N. Little]

So, below an A element is within a DIV element with an ID of arrows,
isn't it?

<div id="normal">
<a href="normal.html">Normal link</a>
</div>
<div id="arrows">
<a href="subpage.html">Link with an arrow image</a>
</div>

No you are correct I missed the DIV... #arrows a {} is correct for your
application.


Take care,

Jonathan

 

[Toby A Inkster]

The 'content: "";' was confusing Konqueror - with this one, it looks
fine in Firefox, IE7 and Konqueror:

'content: ""' wasn't *confusing* Konqueror. Konqueror was rendering it
completely correctly, as 'content: ""' means 'display no content'.

--
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 2 days, 14:51.]

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

 

[Tomasz Chmielewski]

'content: ""' wasn't *confusing* Konqueror. Konqueror was rendering it
completely correctly, as 'content: ""' means 'display no content'.

In that case, Firefox and IE7 can't render 'content: ""' CSS element
correctly.

 

[Ben C]

In that case, Firefox and IE7 can't render 'content: ""' CSS element
correctly.

It's Konqueror that's wrong. The content property only applies to
:before and :after pseudo-elements. IIRC you had it in an ordinary
selector without :before or :after. It should do nothing to those
elements.

It's not supposed to rewrite the content of a normal element, at least
not in CSS 2.1.

 

[Toby A Inkster]

It's Konqueror that's wrong. The content property only applies to
:before and :after pseudo-elements. IIRC you had it in an ordinary
selector without :before or :after. It should do nothing to those
elements.

Konqueror (partially) supports the draft CSS 3 model of the content
property -- KHTML in general seems to have implemented a lot of these
things very early.

I was also under the impression that I'd had an e-mail exchange with HÃ¥kon
Wium Lie about this issue in some of the earlier CSS 2.1 drafts, but going
back to my old records, that exchange was actually about an error where it
was written that white-space only applied to block elements.

--
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 3 days, 22 min.]

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