content

  • Revision slug: Web/CSS/content
  • Revision title: content
  • Revision id: 483853
  • Created:
  • Creator: KarenScott
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

Summary

The content CSS property is used with the {{ cssxref("::before") }} and {{ cssxref("::after") }} pseudo-elements to generate content in an element. Objects inserted using the content property are anonymous replaced elements.

{{cssbox("content")}}

Syntax

Formal syntax: {{csssyntax("content")}}
content: normal                                /* Keywords that cannot be combined with other values */
content: none

content: 'prefix'                              /* <string> value, non-latin characters must be encoded e.g. \00A0 for &nbsp; */
content: url(http://www.example.com/test.html) /* <uri> value */
content: chapter_counter                       /* <counter> values */
content: attr(value string)                    /* attr() value linked to the HTML attribute value */
content: open-quote                            /* Language- and position-dependant keywords */
content: close-quote
content: no-open-quote
content: no-close-quote

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

content: inherit

Values

none
The pseudo-element is not generated.
normal
Computes to none for the :before and :after pseudo-elements.
<string>
Text content.
<uri> url()
The value is a URI that designates an external resource (such as an image). If the resource or image can't be displayed, it is either ignored or some placeholder shows up.
<counter>
Counters may be specified with two different functions: 'counter()' or 'counters()'. The former 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 this pseudo-element; it is formatted in the indicated style ('decimal' by default). The latter 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 this pseudo-element, from outermost to innermost separated by the specified string. The counters are rendered in the indicated style ('decimal' by default). See the section on automatic counters and numbering for more information. The name must not be 'none', 'inherit' or 'initial'. Such a name causes the declaration to be ignored.
attr(X)
Returns 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 {{ cssxref("quotes") }} property.
no-open-quote | no-close-quote
Introduces no content, but increments (decrements) the level of nesting for quotes.

Examples

q:lang(en) { quotes: '"' '"' "'" "'" }
q:before   { content: open-quote }
q:after    { content: close-quote }
h1:before  { content: "Chapter: "; }
/* content accepts multiple values */

a:before   { content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: "; 
             font:    x-small Arial,freeSans,sans-serif;
             color:   gray;
           }

{{ JSFiddleLink("r9FyK") }}

Code sample - content with multiple values adding an icon before a link

HTML Content

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

CSS Content

a:before{
    content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: ";
    font:    x-small Arial,freeSans,sans-serif;
    color:   gray;
}

Output

{{ EmbedLiveSample('Code_sample_-_content_with_multiple_values', 200, 60) }}

Code sample - adding an icon after text.

HTML Content

<div class="brightIdea">
    <p>This is my first idea</p>
    <p>and another good idea</p>
</div>

CSS Content

/* first import the icon from a suitable site */
@import url(http://weloveiconfonts.com/api/?family=entypo);

.brightIdea p:after{
    content: '\1f4a1';
    font-family: 'entypo', sans-serif;
}

Output

{{ EmbedLiveSample('Code_sample_-_adding_an_icon_after_text.', 200, 100) }}

Specifications

Specification Status Comment
{{ SpecName('CSS2.1', 'generate.html#content', 'content') }} {{ Spec2('CSS2.1') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 {{ CompatGeckoDesktop("1") }} 8.0 4.0 1.0
url() support 1.0 {{ CompatGeckoDesktop("1") }} 8.0 7.0 1.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 {{ CompatGeckoMobile("1.0") }} 8.0 9.5 1.0

See also

  • {{ Cssxref("::after") }}, {{ Cssxref("::before") }}, {{ Cssxref("quotes") }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>content</code> CSS property is used with the {{ cssxref("::before") }} and {{ cssxref("::after") }} pseudo-elements to generate content in an element. Objects inserted using the <code>content</code> property are <em>anonymous <a href="/en-US/docs/CSS/Replaced_element" title="CSS/Replaced_element">replaced elements</a>.</em></p>
<p>{{cssbox("content")}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("content")}}
</pre>
<pre>
content: normal                                /* Keywords that cannot be combined with other values */
content: none

content: 'prefix'                              /* &lt;string&gt; value, non-latin characters must be encoded e.g. \00A0 for &amp;nbsp; */
content: url(http://www.example.com/test.html) /* &lt;uri&gt; value */
content: chapter_counter                       /* &lt;counter&gt; values */
content: attr(value string)                    /* attr() value linked to the HTML attribute value */
content: open-quote                            /* Language- and position-dependant keywords */
content: close-quote
content: no-open-quote
content: no-close-quote

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

content: inherit
</pre>
<h3 id="Values">Values</h3>
<dl>
 <dt>
  <code>none</code></dt>
 <dd>
  The pseudo-element is not generated.</dd>
 <dt>
  <code>normal</code></dt>
 <dd>
  Computes to <code>none</code> for the <code>:before</code> and <code>:after</code> pseudo-elements.</dd>
 <dt>
  &lt;string&gt;</dt>
 <dd>
  Text content.</dd>
 <dt>
  &lt;uri&gt;<code> url()</code></dt>
 <dd>
  The value is a URI that designates an external resource (such as an image). If the resource or image can't be displayed, it is either ignored or some placeholder shows up.</dd>
 <dt>
  &lt;counter&gt;</dt>
 <dd>
  Counters may be specified with two different functions: 'counter()' or 'counters()'. The former has two forms: 'counter(<var>name</var>)' or 'counter(<var>name</var>, <var>style</var>)'. The generated text is the value of the innermost counter of the given name in scope at this pseudo-element; it is formatted in the indicated style ('decimal' by default). The latter function also has two forms: 'counters(<var>name</var>, <var>string</var>)' or 'counters(<var>name</var>, <var>string</var>, <var>style</var>)'. The generated text is the value of all counters with the given name in scope at this pseudo-element, from outermost to innermost separated by the specified string. The counters are rendered in the indicated style ('decimal' by default). See the section on automatic counters and numbering for more information. The name must not be 'none', 'inherit' or 'initial'. Such a name causes the declaration to be ignored.</dd>
 <dt>
  <code>attr(X)</code></dt>
 <dd>
  Returns 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.</dd>
 <dt>
  <code>open-quote</code> | <code>close-quote</code></dt>
 <dd>
  These values are replaced by the appropriate string from the {{ cssxref("quotes") }} property.</dd>
 <dt>
  <code>no-open-quote</code> | <code>no-close-quote</code></dt>
 <dd>
  Introduces no content, but increments (decrements) the level of nesting for quotes.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<pre>
q:lang(en) { quotes: '"' '"' "'" "'" }
q:before   { content: open-quote }
q:after    { content: close-quote }
</pre>
<pre>
h1:before  { content: "Chapter: "; }
</pre>
<pre>
/* content accepts multiple values */

a:before   { content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: "; 
             font:    x-small Arial,freeSans,sans-serif;
             color:   gray;
           }
</pre>
<p>{{ JSFiddleLink("r9FyK") }}</p>
<h2 id="Formatting_a_breadcrumb_list_by_inserting_content_before_links" name="Formatting_a_breadcrumb_list_by_inserting_content_before_links">&nbsp;</h2>
<h2 id="Code_sample_-_content_with_multiple_values" name="Code_sample_-_content_with_multiple_values">Code sample - content with multiple values adding an icon before a link</h2>
<h3 id="HTML_Content">HTML Content</h3>
<pre class="brush: html">
&lt;a href="http://www.mozilla.org/en-US/"&gt;Home Page&lt;/a&gt;</pre>
<h3 id="CSS_Content">CSS Content</h3>
<pre class="brush: css">
a:before{
&nbsp;&nbsp;&nbsp; content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: ";
&nbsp;&nbsp;&nbsp; font:&nbsp;&nbsp;&nbsp; x-small Arial,freeSans,sans-serif;
&nbsp;&nbsp;&nbsp; color:&nbsp;&nbsp; gray;
}</pre>
<h3 id="Output">Output</h3>
<p>{{ EmbedLiveSample('Code_sample_-_content_with_multiple_values', 200, 60) }}</p>
<h2 name="Code_sample_-_adding_an_icon_after_text.">Code sample - adding an icon after text.</h2>
<h3>HTML Content</h3>
<pre class="brush: html">
&lt;div class="brightIdea"&gt;
&nbsp;&nbsp;&nbsp; &lt;p&gt;This is my first idea&lt;/p&gt;
&nbsp;&nbsp;&nbsp; &lt;p&gt;and another good idea&lt;/p&gt;
&lt;/div&gt;</pre>
<h3>CSS Content</h3>
<pre class="brush: css">
/* first import the icon from a suitable site */
@import url(http://weloveiconfonts.com/api/?family=entypo);

.brightIdea p:after{
&nbsp;&nbsp;&nbsp; content: '\1f4a1';
&nbsp;&nbsp;&nbsp; font-family: 'entypo', sans-serif;
}</pre>
<h3>Output</h3>
<p>{{ EmbedLiveSample('Code_sample_-_adding_an_icon_after_text.', 200, 100) }}</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS2.1', 'generate.html#content', 'content') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Chrome</th>
    <th>Firefox (Gecko)</th>
    <th>Internet Explorer</th>
    <th>Opera</th>
    <th>Safari (WebKit)</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>1.0</td>
    <td>{{ CompatGeckoDesktop("1") }}</td>
    <td>8.0</td>
    <td>4.0</td>
    <td>1.0</td>
   </tr>
   <tr>
    <td><code>url()</code> support</td>
    <td>1.0</td>
    <td>{{ CompatGeckoDesktop("1") }}</td>
    <td>8.0</td>
    <td>7.0</td>
    <td>1.0</td>
   </tr>
  </tbody>
 </table>
</div>
<div id="compat-mobile">
 <table class="compat-table">
  <tbody>
   <tr>
    <th>Feature</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Basic support</td>
    <td>1.0</td>
    <td>{{ CompatGeckoMobile("1.0") }}</td>
    <td>8.0</td>
    <td>9.5</td>
    <td>1.0</td>
   </tr>
  </tbody>
 </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
 <li>{{ Cssxref("::after") }}, {{ Cssxref("::before") }}, {{ Cssxref("quotes") }}</li>
</ul>
Revert to this revision