The content property is used with the ::before and ::after pseudo-elements to generate content inside an element, otherwise the content won’t be generated and inserted. The content always should be added. The property has the following values:
- normal
- none
- counter
- attr
- string
- open-quote
- close-quote
- no-open-quote
- no-close-quote
- url
Objects which are inserted with the content property are anonymous replaced elements.
Initial Value | normal |
Applies to | ::before and ::after pseudo-elements. |
Inherited | No. |
Animatable | No. |
Version | CSS2 |
DOM Syntax | object.style.Content = "none"; |
Syntax
content: normal | none | counter | attr | string | open-quote | close-quote | no-open-quote | no-close-quote | url | initial | inherit;
Example of the content property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::before {
content: "Name -";
}
.country::before {
content: normal;
}
</style>
</head>
<body>
<h2>Content property example</h2>
<p>My name is John</p>
<p class="country">I live in Canada</p>
</body>
</html>
Result
Example of the content property with the "string" value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:before {
content: "List item";
}
p:after {
content: " with string value.";
}
</style>
</head>
<body>
<h2>Content property example</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<p>Here is some paragraph</p>
</body>
</html>
In the following example, you can see that "open-quote" cannot appear without "close-quote".
Example of the content property with the "open-quote" value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::before {
content: open-quote;
}
p::after {
content: close-quote;
}
</style>
</head>
<body>
<h2>Content property example</h2>
<p>Hello, my name is John</p>
<p>I am from Canada</p>
</body>
</html>
Example of the content property with the "open-quote" and "no-close-quote" values:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::before {
content: open-quote;
}
p::after {
content: no-close-quote;
}
</style>
</head>
<body>
<p>Example with content property</p>
</body>
</html>
Values
Value | Description |
---|---|
normal | Sets the content to normal. This is the default value. |
none | Sets the content to nothing. The pseudo-element is not generated. |
counter | Sets the content as a counter. |
attr | Sets the content as one of the selectors' attribute. |
string | Sets the content to text. |
open-quote | Sets the content to be an opening quote. |
close-quote | Sets the content to be a closing quote. |
no-open-quote | Removes the opening quote from the content. |
no-close-quote | Removes the closing quote from the content. |
url | Sets the content to be a media just like an image, a sound or a video. If the image cannot be displayed, it will be either ignored or some placeholder will be displayed. |
initial | Sets the property to its default value. |
inherit | Inherits the property from its parent element. |
Browser support
1.0+ | 1.0+ | 1.0+ | 4.0+ |
Practice Your Knowledge
What are the different CSS content categories that can be used to control a box's content size?
Correct!
Incorrect!
Quiz Time: Test Your Skills!
Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.