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

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. 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>


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
.

Relevant Pages

  • Re: How do I do a layout with 100% width minus padding on left and right?
    ... I am a relative beginner at CSS, ... > width of the window. ... > the padding on the left and right). ... If you set the outer content div to ...
    (alt.html)
  • Question about CSS layouts (with a sidebar) and
    heights...
    ... I have a couple of questions concerning CSS layouts, ... body {text-align: center; ... border: #000000 2px solid;} ... padding: 3px;} ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: Trouble with Sliding Doors
    ... lower row of tabs keeps changing and moving further to the right. ... I've taken out that padding now and the ... show you the CSS for that item. ... I'd never heard of the Web Developer plugin but quickly found it with a ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: Problem centering UL and LI elements
    ... How about making these changes at least to the css: ... padding: 0; ... font: bold .85em Arial sans-serif; ... /* Dont use px for font sizes and especially not flyspeck like ...
    (alt.html)
  • Re: To the gurus out there - a conundrum.
    ... maybe I should put 0px here to make it look nice and balanced or for the practical reason that maybe I will change my mind later and put a positive number instead, the px is already there and waiting for me... ... 10px of padding are much with a font-size of 20px, but one can hardly recognize them with a font-size of 40px... ... Most time I use no padding at all but margin if I have no border, so I avoid to write bugfixes for IE 5 or older (CSS box model)... ...
    (alt.html)