Forum Moderators: not2easy
The CSS looks like this:
Which puts a little word doc icon next to a link to a .doc file.
a[href$=doc]:after {
content: " " url("/pa/images/icons/doc.gif");
}
I have these for a couple different links, eg: pdf, wav, mp3
What I am trying to do is use CSS sprites because 30% of my page load time is for http get requests for the different images.
But the :after tag does not like a background image.
This is what I have so far (which puts the image there but not in the right spot):
a[href$=pdf] {
background-image:url(/pa/images/icons/test/14d171de5dd528e727e3f559e018a98c.png);
background-repeat:no-repeat;
background-position: -8px -232px;
width: 16px;
height: 16px;
position:relative;
top:0px;
left:0px
}
I am trying to do this with just CSS I would greatly not like to modify the source code (asp, html) to get this done.
Any help would be great, Thanks!
have you tried "display: block;", via a float if it's to be displayed 'inline', on the :after content - possibly won't need relative and top/left then? - initial display value of an element is inline, so block would be needed for image dimensions?
