CSS Property content
content property defines the generated content placed before or after an element.
Summary
| Item | Value |
|---|---|
| Inherited | No. |
| Version | CSS2 |
| JavaScript syntax | object.style.content="content" |
| Applies to | :before and :after pseudo-elements. |
CSS Syntax
content: normal |
none |
string |
url() |
counter |
attr(X) |
open-quote |
close-quote |
no-open-quote |
no-close-quote |
inherit
Property Values
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 |
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
content |
Yes | 8.0 | Yes | Yes | Yes |
Example
An example showing how to use content CSS property.
<!DOCTYPE HTML>
<html>
<head>
<style>
p:before {<!-- ww w . j ava 2 s.com-->
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>