:before/:after and content

Back to the index.

This is a test of the vital content declaration that should be used in :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.)

Values

This is the test paragraph with counter: none.

This is the test paragraph with content: counter(test). The correct counter value is 3.

This is the test paragraph with content: attr(title).

This is the test paragraph with content: 'Test string'.

This is the test paragraph with content: url(/pix/logo_ppk.gif).

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.