The property content in combination with pseudo-elements :after and :before is used to dynamically generate content in already existing document tree.

The content property contains following information:

  1. value: normal, none, [<string>, <uri>, <counter>, attr(<identifier>), open-quote, close-quote, no-open-quote, no-close-quote]+ or inherit;
  2. initial: normal;
  3. applies to: :before and :after pseudo elements;
  4. inherited: no;
  5. percentages: N/A;
  6. media: all;
  7. computed value: computed as 'normal' unless :before and :after are set to 'normal' in which case it will be computed as 'none'; for 'URI' values it is absolute URI; for attr() values it is resulting string; other values are as specified.

The none value will simply remove the pseudo-element associated with it, while value normal will compute as 'none' when used with the pseudo-elements.

The string value is used as a regular text added to the existing paragpraph in the document, while URI is commonly used to insert an image to a wanted spot.

The counter value or functions may be expressed as 'counter ()' or 'counters ()'. The first mentioned specifies the innermost counter of the scope and if wanted, its style (counter(name), list-style-type) while the latter specifies all the counters within the scope separated by the specified string and ending with the list style as well (counters(name, string, list-style-type)).

Open-quote and close-quote values will insert quotes to the element. These quotes may be defined with the quotes property. The other two quotes related values, no-open-quote and no-close-quote are used to increment or decrement the level of nesting quotes.

The value attr(x) may be used as a function that inserts the string value of the element's attribute (selector) to desired place.

Please note that Internet Explorer 8.0 requires DOCTYPE to be declared in order to understand the content property.

Example

CSS content property example:

 

›› go to examples ››