Наши волонтёры ещё не перевели данную статью на Русский. Присоединяйтесь к нам и помогите сделать эту работу!
Вы можете также прочитать эту статью на English (US).

The content CSS property replaces an element with a generated value. Objects inserted using the content property are anonymous replaced elements.

/* Keywords that cannot be combined with other values */
content: normal;
content: none;

/* <url> value */
content: url("http://www.example.com/test.png");

/* <image> value */
content: linear-gradient(#e66465, #9198e5);

/* values below can only be applied to generated content using ::before and ::after */

/* <string> value */ 
content: "prefix";

/* <counter> values */
content: counter(chapter_counter);
content: counters(section_counter, ".");

/* attr() value linked to the HTML attribute value */
content: attr(value string);

/* Language- and position-dependent keywords */
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;

/* Except for normal and none, several values
   can be used simultaneously */
content: open-quote chapter_counter;

/* Global values */
content: inherit;
content: initial;
content: unset;

Initial valuenormal
Applies to::before and ::after pseudo-elements
Computed valueOn elements, always computes to normal. On ::before and ::after, if normal is specified, computes to none. Otherwise, for URI values, the absolute URI; for attr() values, the resulting string; for other keywords, as specified.
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar



The pseudo-element is not generated.
Computes to none for the ::before and ::after pseudo-elements.
Any number of text characters. Non-Latin characters must be encoded using their Unicode escape sequences: for example, \000A9 represents the copyright symbol.
A URL that designates an external resource (such as an image). If the resource can't be displayed, it is either ignored or a placeholder is shown.
An <image>, denoted by the <url> or <gradient> data type, or part of the webpage, defined by the element() function, denoting the content to display.
The value of a CSS counter, generally a number. It can be displayed using either the counter() or counters() function.

The counter() function has two forms: 'counter(name)' or 'counter(name, style)'. The generated text is the value of the innermost counter of the given name in scope at the given pseudo-element. It is formatted in the specified style (decimal by default).

The counters() function also has two forms: 'counters(name, string)' or 'counters(name, string, style)'. The generated text is the value of all counters with the given name in scope at the given pseudo-element, from outermost to innermost, separated by the specified string. The counters are rendered in the indicated style (decimal by default).

The value of the element's attribute x as a string. If there is no attribute x, an empty string is returned. The case-sensitivity of attribute names depends on the document language.
open-quote | close-quote
These values are replaced by the appropriate string from the quotes property.
no-open-quote | no-close-quote
Introduces no content, but increments (decrements) the level of nesting for quotes.

Formal syntax

normal | none | [ <content-replacement> | <content-list> ] [/ <string> ]?

<content-replacement> = <image>
<content-list> = [ <string> | contents | <image> | <quote> | <target> | <leader()> ]+

<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
<quote> = open-quote | close-quote | no-open-quote | no-close-quote
<target> = <target-counter()> | <target-counters()> | <target-text()>
<leader()> = leader( <leader-type> )

<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
<target-counter()> = target-counter( [ <string> | <url> ] , <custom-ident> , <counter-style>? )
<target-counters()> = target-counters( [ <string> | <url> ] , <custom-ident> , <string> , <counter-style>? )
<target-text()> = target-text( [ <string> | <url> ] , [ content | before | after | first-letter ]? )
<leader-type> = dotted | solid | space | <string>

<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<counter-style> = <counter-style-name> | symbols()

<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>#{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<counter-style-name> = <custom-ident>

<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<color-stop> = <color> <length-percentage>?
<length-percentage> = <length> | <percentage>


Headings and quotes

This example inserts quotation marks around quotes, and adds the word "Chapter" before headings.


<p>According to Sir Tim Berners-Lee,
  <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">I was
    lucky enough to invent the Web at the time when the Internet
    already existed - and had for a decade and a half.</q>
  We must understand that there is nothing fundamentally wrong
  with building on the contributions of others.

<p>According to the Mozilla Manifesto,
  <q cite="http://www.mozilla.org/en-US/about/manifesto/">Individuals
    must have the ability to shape the Internet and
    their own experiences on the Internet.</q>
  Therefore, we can infer that contributing to the open web
  can protect our own individual experiences on it.


q {
  color: blue;

q::before {
  content: open-quote;

q::after {
  content: close-quote;

h1::before  {
  content: "Chapter ";  /* The trailing space creates separation
                           between the added content and the
                           rest of the content */


Image combined with text

This example inserts an image before the link. If the image is not found, it inserts text instead.


<a href="http://www.mozilla.org/en-US/">Mozilla Home Page</a>


a::before {
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") " MOZILLA: ";
  font: x-small Arial, sans-serif;
  color: gray;


Targeting classes

This example inserts additional text after special items in a list.


<h2>Paperback Best Sellers</h2>
  <li>Political Thriller</li>
  <li class="new-entry">Halloween Stories</li>
  <li>My Biography</li>    
  <li class="new-entry">Vampire Romance</li>


.new-entry::after {
  content: " New!";  /* The leading space creates separation
                        between the added content and the
                        rest of the content */
  color: red;


Images and element attributes

This example inserts an image before each link, and adds its id attribute after.


  <li><a id="moz" href="http://www.mozilla.org/">
    Mozilla Home Page</a></li>
  <li><a id="mdn" href="https://developer.mozilla.org/">
    Mozilla Developer Network</a></li>


a {
  text-decoration: none;
  border-bottom: 3px dotted navy;

a::after {
  content: " (" attr(id) ")";

#moz::before {
  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") ;

#mdn::before {
  content: url("https://mdn.mozillademos.org/files/7691/mdn-favicon16.png") ;

li {
  margin: 1em;


Element replacement

This example replaces an element content with an image. You can replace the contents of an element with either an <url> or other <image> value. Content added with ::before or ::after will not be generated as the contents of the element are replaced.


<div id="replaced">Mozilla</div>


#replaced {
  content: url("https://mdn.mozillademos.org/files/12668/MDN.svg");

#replaced::after { /* will not show if element replacement is supported */
  content: " (" attr(id) ")"; 


Accessibility concerns

CSS-generated content is not included in the DOM. Because of this, it will not be represented in the accessibility tree and certain assistive technology/browser combinations will not announce it. If the content conveys information that is critical to understanding the page's purpose, it is better to include it in the main document.


Specification Status Comment
CSS Generated Content Module Level 3
The definition of 'content' in that specification.
Working Draft  
CSS Level 2 (Revision 1)
The definition of 'content' in that specification.
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 8Opera Full support 4Safari Full support 1WebView Android Full support 1Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support 9.5Safari iOS Full support 1Samsung Internet Android Full support Yes
Element replacementChrome Full support YesEdge ? Firefox Full support 63IE ? Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android ? Edge Mobile ? Firefox Android Full support 63Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
url()Chrome Full support 1Edge ? Firefox Full support 1IE Full support 8Opera Full support 7Safari Full support 1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?


Full support  
Full support
Compatibility unknown  
Compatibility unknown

See also

Метки документа и участники

Обновлялась последний раз: mfuji09,