The content property inserts content before or after an element.
It uses the ::before and ::after pseudo-elements with this.
Content can be a string, a symbol, or an image.
A "\2605" (star) character added before each list item as content.
<style>
.list {
list-style-type: none;
padding-left: 10px;
}
.list li::before {
content: "\2605";
margin-right: 10px;
color: teal;
}
</style>
<ul class="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
content: normal | none | counter | attr | string |
open-quote | close-quote | no-open-quote |
no-close-quote | url | initial | inherit;
| Value | Description |
|---|---|
normal |
Default. Sets content to "none" - which means no content |
none |
Sets content to nothing |
counter |
Sets the content as a counter |
attr(attribute) |
Sets the content as one of the selector's attribute |
string |
Sets the content to any specified 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 if specified |
no-close-quote |
Removes the closing quote from the content if specified |
url(url) |
Sets the content to be some kind of media like an image, a sound, a video, and more. |
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
List items with a checkmark after the text.
<style>
.list-after {
list-style-type: none;
padding-left: 10px;
}
.list-after li::after {
content: "\2713";
margin-left: 10px;
color: green;
}
</style>
<ul class="list-after">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
The value of a content property can also be an image.
Below, each list item has a circle icon before the text.
<style>
.list-image {
list-style-type: none;
padding-left: 10px;
}
.list-image li::before {
content: url(/img/css/circle.png);
margin-right: 10px;
}
</style>
<ul class="list-image">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
This table shows when content support started for each browser.
 Chrome
|
1.0 | Dec 2008 |
 Firefox
|
1.0 | Nov 2004 |
 IE/Edge
|
8.0 | Mar 2009 |
 Opera
|
4.0 | Jun 2000 |
 Safari
|
1.0 | Jun 2003 |
