Content: property

HTML & CSS
1

Is this possible? The pdf icon does not show up on the printed page.


a[href $='.pdf']:after {
	padding:3px; 
	display:inline; 
	vertical-align:middle;
	background-color:#FFF; 
	content: url(/images/pdficon_small.gif);
}
2

Hi, just set it as a background image instead of doing it as content :). Besides, that’s invalid anyway, you could have done something like this

a[href $='.pdf']:after {
	padding:3px; 
	display:inline; 
	vertical-align:middle;
	background-color:#FFF; 
	content: "content";
}

THat could be used, just saying lol :slight_smile:
You could try this

a[href $='.pdf'] {
	padding:3px; 
	display:inline; 
	vertical-align:middle;
	background: #FFF url(/images/pdficon_small.gif) no-repeat top right;
}

I’m just guessing you want it on the right, so if you don’t want it on the right change the last value on “background” to “left” :slight_smile:

3

In a quick test in Firefox 3.6 that seems to work as expected.

Not all browsers have full support for generated content though and some things can be disabled in the browser to limit what is printed on the page. Have you seen the reference?

4

Background images don’t print by default.

5

In that case he could hard code an <img> in, though you should avoid printing images to save user toner :slight_smile:

6

I disagree, I like this use of CSS even though it doesn’t have full support yet. I believe Cathy is a she :wink:

7

I don’t like it either, however if she needs the image printed, then to get all browsers working, my solution will work.