CSS2 » Other » after

Version: Level 2

Compability: N6+

The :after pseudo-element is used to insert content after 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 suffix the same text to large number of related text elements which have the same class value.

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.
 
Note that while the content property does not inherit, the :before and :after psuedo-elements can inherit any inheritable styles that are in effect, or you can specify various CSS properties to effect the appearance of the content.
 
A pseudo-element is assigned to a selector via following syntax:
 
selector:pseudo-element {property: value; ...;}
 
A pseudo-element can also be used with the value assigned as a class to a selector:
 
selector.classvalue:pseudo-element {property: value; ...;}
 

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: