CSS content property
CSS content property
Description
The content property defines the content to be inserted in the generated content action. This property is used with the :before or :after pseudo-element.
Possible values
- **string** – Any allowed string value. This value is always enclosed in quotes.
-
URI – A pointer to an external resource (such as an image).
-
**counter ** – This value has two possible forms: counter(name, style?) and counters(name, string?, style?). In both cases, the content will be the value of the named counter in the document, rendered with an optional style value (defaults to decimal). In the case of counters(…), the optional string value represents the string that follows each instance of the named counter.
-
attr(X) – Causes the value of attribute X of the selector subject to be inserted. For example, you could use this value to display the value of the alt attribute of an image.
-
open-quote – Causes the appropriate string specified using the quotes attribute to be inserted.
-
close-quote – Causes the appropriate string specified using the quotes attribute to be inserted.
-
no-open-quote – Prevents insertion of the appropriate string specified using the quotes attribute. However, the nesting level of quotes is still increased.
-
no-close-quote – Prevents insertion of the appropriate string specified using the quotes attribute. However, the nesting level of quotes is still decreased.
Applies to
:before and :after pseudo-elements.
DOM Syntax
object.style.content = "url(home.avi)"
Example
The following is an example that demonstrates how to use the :before element to add some content before any element.
<html>
<head>
<style type = "text/css">
p:before {
content: url(/https://coder-cafe.com/wp-content/uploads/2025/09/images/bullet.gif)
} </style>
</head>
<body>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
<p> This line will be preceded by a bullet.</p>
</body>
</html>
This will generate the following black link−
The following is an example showing how to use the :after element to add some content after any element.
<html>
<head>
<style type = "text/css">
p:after {
content: url(/https://coder-cafe.com/wp-content/uploads/2025/09/images/bullet.gif)
}
</style>
</head>
<body>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p>
<p> This line will be succeeded by a bullet.</p> </body>
</html>
This will produce the following black link −
