CSS2 » Other » before

Version: Level 2

Compability: N6+

The :before pseudo-element is used to insert content immediately before an element. This is done via the content property. The content assigned by the content property can be characters, a string, text, or an image. Further, you can apply style to the content, such as setting font and color. This is a convenient way to prefix the same text to large number of related text elements which have the same class value.

The similar :after pseudo-element is used to insert content immediately after an element.
 
CSS2 has four pseudo-elements: :after, :before, :first-letter, and :first-line. Pseudo-elements allow you to create element-like structures which permit you to apply style to parts of a document that normally cannot be accessed using HTML. Specifically, you can add styled content before and after an element, or effect the style of the first letter or first line of an element.

Examples

Code:
<html>
<head>
<title>after and before test</title>
<style type="text/css">
p.orange:before {content: "FOR SALE!"; color: orange;}
p.orange:after {content: "No implied warrenty"; color: blue;}
</style>
</head>
<body>
<p class="orange">
1954 Ford Maroon 2-door Sedan, as is, $399.00
</p>
<p class="orange">
1955 Ford Black 4-door Sedan, rusted, $299.00
</p>
</body>
</html>
Output:
FOR SALE! 1954 Ford Maroon 2-door Sedan, as is, $399.00 No implied warranty

FOR SALE! 1955 Ford Black 4-door Sedan, rusted, $299.00 No implied warranty

Explanation:

Simulated output, however, the above code will work on Netscape 6+.

Language(s): CSS2

See Also: