Compatibility: N6+
Version: Level 2
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.
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; ...;}
Code:
<html>
<head>
<title>after and before test</title>
<style type="text/css">
p.red:before {content: "FOR SALE!"; color: red;}
p.red:after {content: "No implied warrenty"; color: blue;}
</style>
</head>
<body>
<p class="red">
1954 Ford Maroon 2-door Sedan, as is, $399.00
</p>
<p class="red">
1955 Ford Black 4-door Sedan, rusted, $299.00
</p>
</body>
</html>
Simulated output, however, the above code will work on Netscape 6+.
Output:
FOR SALE!
1954 Ford Maroon 2-door Sedan, as is, $399.00
No implied warrenty
FOR SALE!
1955 Ford Black 4-door Sedan, rusted, $299.00
No implied warrenty
|