CSS3 Tests: Overwriting Content

In CSS3, you can assign content to an element, not just before or after. This is a test page for that.

Target

The target of this test is to see whether browsers can set the content of an element through CSS. In CSS2, you could set the content of before or after the element, but in CSS3 you can overwrite the actual content itself.

Example

Below there are two divs. The first has no content in the HTML source, so you may not see it. The second one has some content in the HTML source.

Your browser doesn’t support content on any element.

What if the div has :before and :after Pseudo classes as well?

Your browser doesn't support this.

Next the attr() function with content.

Your browser doesn’t support content on any element.

Finally a test with images. In the first div below, I have just content: url(btest.gif), but on the second one there is content: "Test" url(btest.gif). You should see two green blocks.

Your browser doesn't support images on any element.

Your browser doesn't support content images on any element.