CSS property content is used with the ::before and ::after pseudo-elements to generate content in a document.
CSS property content
| CSS version: | CSS 2.1 |
| Value: | normal | none | [ string | uri | counter | attr(identifier) | open-quote | close-quote | no-open-quote | no-close-quote ]+ |
| Initial: | normal |
| Applies to: | ::before and ::after pseudo-elements |
| Inherited: | no |
Example – display url after a tag text using content
<style type="text/css">
a::after {
content: " [" attr(href) "]";
}
</style>
<a href="https://infoheap.com/">link1</a>Example – display fixed string before a tag text
<style type="text/css">
a::before {
content: " | ";
}
</style>
<a href="https://infoheap.com/">link1</a>Example – display img before a tag text
<style type="text/css">
a::before {
content: url(/img/star_10x10.png);
}
</style>
<a href="https://infoheap.com/">link1</a>Example – automatic quote around p tag text
<style type="text/css">
p::before {
content: open-quote;
}
p::after {
content: close-quote;
}
</style>
<p>Content inside p tag</p>
