Generated Content in CSS

CSS2 and CSS2.1 include a new feature called generated content. This is content that is created by the browser but is not represented either by markup or content. To insert generated content into the document, use the :before and :after pseudo-elements. These place generated content before or after the content of an element by way of the content property (described in the next section).

If you're going to generate content, you need a way to describe the content to be generated. As you've already seen, this is handled with the content property, but there's a great deal more to this property than you've seen thus far

Content :

Values

normal | [ | | | attr() | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

Initial value

normal

Applies to

:before and :after pseudo-elements

Example :

CSS script

h1:before {content:"This is first content"; display:block; color: red;}

HTML tag

< h1 >this is second content< /h1 >