content
Description
content property defines the generated content placed before or after an element.
| Item | Value |
|---|---|
| Inherited | No. |
| Version | CSS2 |
| JavaScript syntax | object.style.content="content" |
| Applies to | :before and :after pseudo-elements. |
Syntax and Property Values
content: normal | //from ww w .j a v a 2s . c o m
none |
string |
url() |
counter |
attr(X) |
open-quote |
close-quote |
no-open-quote |
no-close-quote |
inherit
The property values are listed in the following table.
| Value | Description |
|---|---|
| none | Sets the content to nothing |
| normal | Sets the content to normal, default is "none" |
| counter | Sets the content as a counter |
| attr(attribute) | Sets the content as one of the selector's attribute |
| string | Sets text as content |
| open-quote | Sets opening quote as content |
| close-quote | Sets closing quote as content |
| no-open-quote | Removes the opening quote |
| no-close-quote | Removes the closing quote |
| url(url) | Use media (an image, a sound, a video, etc.) as content |
| inherit | Inherit the content property from the parent element |
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
p:before {<!--from w w w. ja v a 2 s.c om-->
content: counter(paragraphNumber, upper-roman) ": ";
}
h1 {
counter-reset: paragraphNumber;
}
p {
counter-increment: paragraphNumber;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>Here is a paragraph.</p>
<p>Here is a paragraph.</p>
<h1>Heading Two</h1>
<p>Here is a paragraph.</p>
<p>Here is a paragraph.</p>
<h1>Heading Three</h1>
<p>Here is a paragraph.</p>
<p>Here is a paragraph.</p>
</body>
</html>
The code above generates the following result.
