:before/:after and content

Not supported by IE7 and lower.

This is a test of the vital content declaration that combines with the :before and :after pseudo-classes.

This paragraph serves for kind of making our counter(test) a global across this page, instead of a local in every <td> below. (OK, I’m borrowing JavaScript terminology to describe a CSS concept, but I find this explanation quite complicated, and I generally don’t repeat stuff that I don’t understand perfectly. Read it for yourself if you really want to know exactly what is going on.)

Opera does not need this trick; the other browsers do.

FF 2.0 and 3.0 don’t honour the min-width of the :before element. FF 3.1 does.

Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7
none
The :before pseudo-element is not generated. 		No Yes No Yes No No No Yes

This is the test paragraph.
counter
Use a counter as value. 		No Yes Yes Yes Yes Yes Incorrect

This is the test paragraph. The correct counter value is 3.

  • Konqueror doesn’t count correctly.
attr()
Use an attribute value. 		No Yes Yes Yes Yes Yes Yes

This is the test paragraph.
string
Use a string value. 		No Yes Yes Yes Yes Yes Yes

This is the test paragraph.
URL
Use an image. 		No Yes Yes Yes Yes Yes Yes

This is the test paragraph.
Selector IE 5.5 IE 6 IE 7 IE8 as IE7 IE8 as IE8 FF 2 FF 3.0 FF 3.1b Saf 3.0 Win Saf 3.1 Win Saf 4.0b Win Chrome 1 Chrome 2 Opera 9.62 Opera 10a Konqueror 3.5.7

Combining values

It's allowed to combine these values.

p.multi:before {
	content: "Test paragraph " counter(test) " " url(/pix/logo_ppk.gif) " with a class of " attr(class);
}

Test paragraph with all content values. The correct counter value is 7.