CSS generated content for ::after and ::before

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="http://infoheap.com/">link1</a>
refresh

Example – display fixed string before a tag text

<style type="text/css">
a::before {
  content: " | ";
}
</style>

<a href="http://infoheap.com/">link1</a>
refresh

Example – display img before a tag text

<style type="text/css">
a::before {
  content: url(/img/star_10x10.png);
}
</style>

<a href="http://infoheap.com/">link1</a>
refresh

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>
refresh

Related

Specification

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments