The :before and :after pseudo-elements

The styles applied here are the following:

.test {
	border: medium solid purple;
	}

P.one:before {
	display: inline;
	content: "Before: ";
	color: green;
	background: white;
	}

P.one:after {
	display: block;
	content: "After";
	font-weight: bolder;
	background: yellow;
	color: black;
	}

P.two {
	font-family: sans-serif;
	}

P.two:before {
	display: none;
	content: "aoeunhaueondue";
	color: red;
	background: yellow;
	}

P.two:after {
	position: absolute; /* ignored */
	top: 0;
	left: 0;
	content: " The end.";
	border-left: inherit;
	}

SPAN.two { color: purple; border: 2px solid green; background: yellow; }
SPAN.two:before { content: "One "; display: inline; }
SPAN.two:after { content: " Three"; display: block; }

P.three {
	text-indent: 1em;
	}

P.three:before {
	position: relative; /* ignored */
	top: -30px;
	left: 200px;
	content: "Start: ";
	border: 2px solid green;
	background: yellow;
	color: black;
	}

P.three:after {
	float: left; /*ignored*/
	width: 200pt; /* ignored */
	display: inline; /* just in case */
	content: " End.";
	}

/* XXX Should test that list and table properties are ignored */

P.four: before {  /* invalid */
	content: "This should not appear!! ";
	color: red;
	background: white;
	}

P.four :after {  /* equivalent to P.four *:after */
	content: " This should not appear!!";
	color: red;
	background: white;
	}

a.five:before {
	content: "A link to ";
	}

a.five:after {
	content: " should be clickable everywhere.";
	}

This paragraph should have a green "Before: " before the paragraph, inside the medium green border and on the same line as the beginning of this text. It should also have the word "After" on its own line at the end of the paragraph, also inside the border, and bolder than the rest of the text, with a yellow background (which goes the full width of the containing border.

This paragraph should have nothing before it (if you see red text, that's wrong. Everything in this paragraph should be sans-serif, including the words at the beginning and the end. You should now see the words "One Two Three" in purple, with a 2px solid green border around all three words, all on a yellow background: Two. The words "The end." should appear at the end of this paragraph, in the normal flow of the text, since before and after pseudo-elements cannot be positioned or floated. Furthermore, those words should have a medium solid purple left border.

This paragraph should start with the word "Start: " and end with the word " End.", and the positioning and floating should be ignored. The word "Start: " should have a 2px solid green border on a yellow background, and should be indented 1em from the beginning of the paragraph.

This paragraph should have only one sentence.

All of the next sentence should act as a link. www.yahoo.com

(Back to CSS Testing Information, David Baron)

LDB, dbaron@dbaron.org