HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
The following example inserts the value of the href attribute in parenthesis after each <a> element
The content
property is used with the
::before and ::after pseudo-elements, to insert generated content.
Default value: | normal |
---|---|
Inherited: | no |
Animatable: | no. Read about animatable |
Version: | CSS2 |
JavaScript syntax: | You can't give an element a pseudo-class by using JavaScript, but there are other ways to get the same result: Try it |
The numbers in the table specify the first browser version that fully supports the property.
Property | |||||
---|---|---|---|---|---|
content | 1.0 | 8.0 | 1.0 | 1.0 | 4.0 |
Value | Description | Example |
---|---|---|
normal | Default value. Sets the content, if specified, to normal, which default is "none" (which is nothing) | Try it » |
none | Sets the content, if specified, to nothing | Try it » |
counter | Sets the content as a counter | Try it » |
attr(attribute) | Sets the content as one of the selector's attribute | Try it » |
string | Sets the content to the text you specify | Try it » |
open-quote | Sets the content to be an opening quote | Try it » |
close-quote | Sets the content to be a closing quote | Try it » |
no-open-quote | Removes the opening quote from the content, if specified | Try it » |
no-close-quote | Removes the closing quote from the content, if specified | Try it » |
url(url) | Sets the content to be some kind of media (an image, a sound, a video, etc.) | Try it » |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit | Try it » |
How to add bullet colors for <ul> or <ol> by removing their default bullets and adding an HTML entity that looks like bullets (•):
ul {
list-style: none; /* Remove HTML bullets */
padding: 0;
margin: 0;
}
li {
padding-left: 16px;
}
li::before {
content: "•"; /* Insert content that looks like bullets */
padding-right: 8px;
color: blue; /* Or a color you prefer */
}
CSS reference: ::before pseudo element
CSS reference: ::after pseudo element