Revision 1065584 of content

<div>{{CSSRef}}</div>

<h2 id="Resumo">Resumo</h2>

<p>O <strong><code><font><font>conteúdo</font></font></code></strong> CSS da propriedade CSS é usado com o&nbsp; {{cssxref("::before")}} e&nbsp;{{cssxref("::after")}} pseudo-elementos para gerar conteúdo em um elemento. <font><font>&nbsp;</font><font>Objetos inseridos usando o&nbsp;</font></font><code><font><font>conteúdo de</font></font></code><font><font>&nbsp;propriedade são&nbsp;</font></font><em><font><font>anônimos&nbsp;</font></font>&nbsp;<a href="/en-US/docs/CSS/Replaced_element" title="CSS/Replaced_element">elementos&nbsp;substituídos</a>.</em></p>

<p>{{cssinfo}}</p>

<h2 id="Syntax"><font><font>Sintaxe</font></font></h2>

<pre class="brush: css">
/* Keywords that cannot be combined with other values */
content: normal;
content: none;

/* &lt;string&gt; value, non-latin characters must be encoded */
/* e.g. \00A0 for &amp;nbsp; */
content: 'prefix';

/* &lt;uri&gt; value */
content: url(https://www.example.com/test.png);

/* &lt;counter&gt; values */
content: chapter_counter;

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

/* Language- and position-dependant 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;
</pre>

<h3 id="Valores">Valores</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><code>&lt;string&gt;</code></dt>
 <dd>Text content.</dd>
 <dt><code>&lt;uri&gt;</code> or <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><code>&lt;counter&gt;</code></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>

<h3 id="Formal_syntax">Formal syntax</h3>

<pre class="syntaxbox">
{{csssyntax}}
</pre>

<h2 id="Exemplos">Exemplos</h2>

<h3 id="Code_sample_-_headings_and_quotes" name="Code_sample_-_headings_and_quotes">Código simples&nbsp;- headings and quotes</h3>

<h4 id="Conteúdo_em_HTML">Conteúdo em HTML&nbsp;</h4>

<pre class="brush: html">
&lt;h1&gt;5&lt;/h1&gt;
&lt;p&gt; We shall start this with a quote from Sir Tim Berners-Lee,
    &lt;q cite="https://www.w3.org/People/Berners-Lee/FAQ.html#Internet"&gt;
        I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.&lt;/q&gt;  We must understand that there is nothing fundamentally wrong with building on the contributions of others.
&lt;/p&gt;

&lt;h1&gt;6&lt;/h1&gt;
&lt;p&gt; Here we shall quote the Mozilla Manifesto,
    &lt;q cite="https://www.mozilla.org/en-US/about/manifesto/"&gt;
        Individuals must have the ability to shape the Internet and their own experiences on the Internet.&lt;/q&gt; And so, we can infer that contributing to the open web, can protect our own individual experiences on it.
&lt;/p&gt;</pre>

<h4 id="Conteúdo_em_CSS">Conteúdo em&nbsp;CSS&nbsp;</h4>

<pre class="brush: css">
q {
    color: #00008B;
    font-style: italic;
}

q::before   { content: open-quote }
q::after    { content: close-quote }

h1::before  { content: "Chapter "; }</pre>

<h4 id="Output">Output</h4>

<p>{{EmbedLiveSample('Code_sample_-_headings_and_quotes', 460, 100)}}</p>

<h3 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</h3>

<h4 id="Conteúdo_em_HTML_2">Conteúdo em HTML&nbsp;</h4>

<pre class="brush: html">
&lt;a href="https://www.mozilla.org/en-US/"&gt;Home Page&lt;/a&gt;</pre>

<h4 id="Conteúdo_em_CSS_2">Conteúdo em&nbsp;CSS&nbsp;</h4>

<pre class="brush: css">
a::before{
    content: url(https://www.mozilla.org/favicon.ico) " MOZILLA: ";
    font:    x-small Arial,freeSans,sans-serif;
    color:   gray;
}</pre>

<h4 id="Output_2">Output</h4>

<p>{{EmbedLiveSample('Code_sample_-_content_with_multiple_values', 200, 60)}}</p>

<h3 id="Code_sample_-_class_based_example" name="Code_sample_-_class_based_example">Code sample - class based example</h3>

<h4 id="Conteúdo_em_HTML_3">Conteúdo em HTML&nbsp;</h4>

<pre class="brush: html">
&lt;h2&gt;Paperback best sellers&lt;/h2&gt;
&lt;ol&gt;
    &lt;li&gt;Political thriller&lt;/li&gt;
    &lt;li class="newEntry"&gt;Halloween Stories&lt;/li&gt;
    &lt;li&gt;My Biography&lt;/li&gt;    
    &lt;li class="newEntry"&gt;Vampire Romance&lt;/li&gt;
&lt;/ol&gt;</pre>

<h4 id="Conteúdo_em_CSS_3">Conteúdo em&nbsp;CSS&nbsp;</h4>

<pre class="brush: css">
/* use a class rather that an element selector to give more flexibility.
Below is a simple string example, but don't forget add a leading space
in the text string for spacing purposes */

.newEntry::after {
    content: " New!";
    color: red;
}</pre>

<h4 id="Output_3">Output</h4>

<p>{{EmbedLiveSample('Code_sample_-_class_based_example', 300, 200)}}</p>

<h3 id="Code_sample_-_rich_link_styling" name="Code_sample_-_rich_link_styling">Code sample - rich link styling</h3>

<h4 id="Conteúdo_em_HTML_4">Conteúdo em HTML&nbsp;</h4>

<pre class="brush: html">
&lt;ul&gt;
    &lt;li&gt;&lt;a id="moz" href="https://www.mozilla.org/"&gt;
        Mozilla Home Page&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a id="mdn" href="https://developer.mozilla.org/"&gt;
        Mozilla Developer Network&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>

<h4 id="Conteúdo_em_CSS_4">Conteúdo em&nbsp;CSS&nbsp;</h4>

<pre class="brush: css">
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;
}

</pre>

<h4 id="Output_4">Output</h4>

<p>{{EmbedLiveSample('Code_sample_-_rich_link_styling', 340, 200)}}</p>

<h2 id="Specifications"><font><font>Especificações</font></font></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>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_Compatibility" name="Browser_Compatibility"><font><font>Compatibilidade com&nbsp;navegador</font></font></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"><font><font>Veja também</font></font></h2>

<ul>
 <li>{{Cssxref("::after")}}</li>
 <li>{{Cssxref("::before")}}</li>
 <li>{{Cssxref("quotes")}}</li>
</ul>