The content property is used to insert the predefined content using the style sheet. The content property is used with ":after" and ":before" Pseudo elements.
Following are the values that are used for "content" property :
- string: sets a string the string before or after the content of the element
- counter: sets the counter value before or after the element.
- attr(attribute): sets the content as the selector elements attribute.
- open-quote: sets opening quote as content
- close-quote: sets closing quote as content.
- no-open-quote: Removes any open quote present before or after the element.
- no-close-quote: removes any close quote present before or after the element.
- url(url): sets the content as specified by the url. It can be image, video etc..
- normal : sets the content to the normal.
- none: sets content to nothing, if present
output of the above code :
This is the test for the content class.
This is sample with with attr().
Example 3: using counter
Output when above classes are applied to the span tag.