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



content: normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
Initial: normal
Applies To: ::before and ::after pseudo-elements
Inherited: no
Percentages: NA
Media: all


content: value
Value Description
attr Inserts the value of an element's attribute
close-quote Replaces close quotation mark with a string from the quotes property
counter Inserts a variable using counter(name), counter(name, style), counters(name, string), or counters(name, string, style)
no-close-quote Removes close quotation mark
no-open-quote Removes open quotation mark
none Pseudo-element is not generated
normal Computes to none for the :before and :after pseudo-elements
open-quote Replaces open quotation mark with a string from the quotes property
string Inserts text
uri Inserts an external resource such as an image


[window.]document.getElementById("element-id").style.content = "content";

Example | attr(x)

Example | close-quote

Example | counter

Example | no-close-quote

Example | no-open-quote

Example | none

Example | normal

Example | open-quote

Example | string

Example | uri

Example | DOM


W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification