Generated content test

Block-level elements

This paragraph should have a square before it. Et ibam forte via sacra sicut meus est mos.

This div should have a paragraph symbol before it. Et ibam forte via sacra sicut meus est mos.

This paragraph should have a square before it. Et ibam forte via sacra sicut meus est mos.

This paragraph should have a dot after it. Et ibam forte via sacra sicut meus est mos.

The relevant CSS is the following:

p.c1:before {
content: '\25A0';
font-weight: bold;
padding-right: 3px;
}

.last:before {
content: '\B6' " ";
font-weight: bold;
padding-right: 3px;
}
.last2:after {
content: '\2022';
font-weight: bold;
padding-left: 3px;
}

Inline elements

This strong element should have an arrow before it.

This em element should have a mathematical symbol before it.

The relevant CSS is the following:

.c3:before {
content: '\25BA';
font-weight: normal;
padding-right: 3px;
}
.c4:before {
content: '\221E';
font-weight: bold;
padding-right: 3px;
}

The rendering of the arrow is different in Opera 9 and Firefox 2.0.

Replaced elements

Two ducks

The relevant CSS is the following:

.duck:before {
font-weight: bold;
display: block;
padding: 3px;
border-bottom: 1px solid #000;
text-align: center;
content: "Two ducks near a pool";
}
.duck {display: block; margin: 5px 0; padding: 0; 
border: 1px solid #000; }

Only Opera supports generated content on images..

Generated content with 'display: run-in'

«For example, the following document fragment and style sheet:

<h2> Header </h2> h2 { display: run-in; }
<p> Text </p> p:before { display: block; content: 'Some'; }

...would render in exactly the same way as the following document fragment and style sheet:

<h2> Header </h2> h2 { display: run-in; }
<p><span>Some</span> Text </p> span { display: block }

Similarly, the following document fragment and style sheet:

<h2> Header </h2> h2 { display: run-in; }
h2:after { display: block; content: 'Thing'; }
<p> Text </p>

...would render in exactly the same way as the following document fragment and style sheet:

<h2> Header <span>Thing</span></h2> h2 { display: block; }
span { display: block; }
<p> Text </p>»

- CSS Specs

A header

Text

Header

Text

The relevant CSS is the following:

.run {display: run-in}
.run:after {display: block; content: "Thing";}
.c5:before { display: block; content: "Some"; }

Results

Passed test. Rendering of some Unicode symbols is different in Firefox 2.0 and Opera 9.

Back