content

The content property is used with the :before and :after pseudo-elements to generate content in a document.

Description

Values	normal \| none \| [ <string> \| <uri> \| <counter> \| attr(<identifier>) \| open-quote \| close-quote \| no-open-quote \| no-close-quote ]+ \| inherit
Initial value	normal
Applies to	:before and :after pseudo-elements
Inherited	No

<uri>
The value is a URI that designates an external resource (such as an image). If the user agent cannot display the resource it must either leave it out as if it were not specified or display some indication that the resource cannot be displayed.

<counter>
This value sets the content as a counter. See also the counter-reset property and the counter-increment property.

attr(<identifier>)
This function returns as a string the value of attribute X for the subject of the selector. The string is not parsed by the CSS processor. If the subject of the selector does not have an attribute X, an empty string is returned. The case-sensitivity of attribute names depends on the document language.

open-quote
This value is replaced by the appropriate string from the quotes property.

close-quote
This value is replaced by the appropriate string from the quotes property.

no-open-quote
Introduces no content, but increments (decrements) the level of nesting for quotes.

no-close-quote
Introduces no content, but increments (decrements) the level of nesting for quotes.

inherit
Takes the same specified value as the property for the element's parent.

[style.css]

 p:before{
   content: "Note. ";
   display: inline;
 }

[index.html]

<body>
  <p>In CSS 2.1, it is not possible to refer to attribute values 
     for other elements than the subject of the selector.</p>
</body>

The CSS specification defines the content property in 12.2 The content property.