:before/:after and content

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 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x
none
The :before pseudo-element is not generated. 		No Yes Yes No No No To be tested

This is the test paragraph.
counter
Use a counter as value. 		No Yes Yes Yes Yes Yes To be tested

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 To be tested

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

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

This is the test paragraph.
Selector IE 5.5 IE 6 IE 7 IE8 IE9 pr3 FF 3.0 FF 3.5 FF 3.6 FF 4b1 Saf 4.0 Win Saf 5.0 Win Chrome 4 Chrome 5 Opera 10.10 Opera 10.53 Opera 10.60 Konqueror 4.x

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.