Appending an image to a CSS class

[adamrj]

I have a large number of documents that contain a particular CSS class (always in an anchor tag). What I want to do is insert a piece of text (or preferably an image) at the end of the linked text using JavaScript. So for example the following code:

<a href="page1.htm" class="asterisk">Page 1</a>

Would output:

Page 1 *

This would be particularly useful for an image to show that the link opened in a new window. Any help very gratefully accepted.

Adam

[ddadmin]

CSS 2 supports generated content, which is exactly what you need. Alas it's only supported in Firefox, not even IE7: CSS Generated Content

[billyboy]

You could add an image as a background in the CSS for the class and use padding to keep the text from sitting on top of it, something like:

.asterisk {
background: url(myImage.gif) no-repeat;
padding-right: 10px;
}

Change the 10px to whatever is needed to keep the text from on top the image. You can also use the background position property to adjust the placement of the image if needed.

[mwinter]

CSS 2 supports generated content, which is exactly what you need. Alas it's only supported in Firefox ...

And Opera, and probably a few others, too. But yes, MSIE spoils the fun somewhat. Generated content shouldn't be used for important data anyway, so its absence shouldn't matter.

Mike