CSS content property is used with ::before and ::after pseudo-elements to insert some extra content into an element.
The content to be inserted can be string(s) of text, images, glyphs, quotes, counters for lists, etc. Try out the example below to see how it works:
Example:
p::before{
content: ' * ';
}
p::after{
content: ' ** ';
}
a::before{
content: url(images/thumb.png);
}
CSS Syntax
The content property has the below syntax:
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;
Property Values
The content property accepts the following values:
| normal | This is the default value. It evaluates to none. Which means no content is set. |
| none | No content is set. |
| counter | Sets the content as a counter. It is generally used with lists. |
| attr(attribute_name) | Sets the value of the specified attribute as content. It is generally used with <a> elements. |
| string | Sets the specified string as content. |
| open-quote | Sets the opening quote as content. |
| close-quote | Sets the closing quote as content. |
| no-open-quote | Removes the existing opening quote if any. |
| no-close-quote | Removes the existing closing quote if any. |
| url(source) | Sets the media(image, video, glyph, etc) specified by the source as content. |
| initial | Sets the content property to its default value(normal). |
| inherit | Inherits the content property from the parent element. |
General Info
| Default Value | normal |
| Inherited | No |
| JavaScript Usage | N/A |
