---
title: content
slug: Web/CSS/content
tags:
  - Propriedade CSS
  - Referencia
translation_of: Web/CSS/content
---
<div>{{CSSRef}}</div>

<p>A propriedade CSS <strong><code>content</code></strong> é usada com os pseudoelementos {{cssxref("::before")}} e {{cssxref("::after")}} para gerar conteúdo em um elemento. Objetos inseridos usando a propriedade <code>content</code> são <em><a href="/pt-BRS/docs/CSS/Replaced_element" title="CSS/Replaced_element">elementos substituídos</a> anônimos</em>.</p>

<pre class="brush: css no-line-numbers">/* Palavras-chave que não podem ser combinadas com outros valores */
content: normal;
content: none;

/* Valores &lt;string&gt; com caracteres especiais devem ser escritos */
/* com escape Unicode, por exemplo \00A0 para &amp;nbsp; */
content: "prefixo";

/* Valores &lt;url&gt; */
content: url("http://www.example.com/test.png");

/* Valores &lt;counter&gt; */
content: counter(contador_capitulo);
content: counters(contador_secao, ".");

/* Valores attr() associados ao valor do atributo HTML */
content: attr(valor string);

/* Palavras-chave que variam com o idioma e posição */
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;

/* Com exceção de normal e none, vários valores */
/* podem ser usados simultaneamente */
content: open-quote chapter_counter;

/* Valores globais */
content: inherit;
content: initial;
content: unset;
</pre>

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

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

<h3 id="Valores">Valores</h3>

<dl>
 <dt><code>none</code></dt>
 <dd>O pseudoelemento não será gerado.</dd>
 <dt><code>normal</code></dt>
 <dd>Equivalente a <code>none</code> para os pseudoelementos <code>::before</code> e <code>::after</code>.</dd>
 <dt>{{cssxref("&lt;string&gt;")}}</dt>
 <dd>Um ou mais caracteres de texto.</dd>
 <dt>{{cssxref("&lt;url&gt;")}}</dt>
 <dd>Uma URL que designa um recurso externo (como uma imagem). Se o recurso não puder ser exibido, ele será ignorado ou um <em lang="en">placeholder</em> será exibido no seu lugar.</dd>
 <dt>{{cssxref("&lt;counter&gt;")}}</dt>
 <dd>O valor de um contador CSS, geralmente um número. Ele pode ser exibido usando a função <a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/counter%28%29" title="A documentação sobre este tópico ainda não foi escrita; por favor, considere dar a sua contribuição nela!"><code>counter()</code></a> ou <a class="new" href="https://developer.mozilla.org/en-US/docs/Web/CSS/counters%28%29" title="A documentação sobre este tópico ainda não foi escrita; por favor, considere dar a sua contribuição nela!"><code>counters()</code></a>.</dd>
 <dd>
 <p>A função <code>counter()</code> tem duas formas: 'counter(<var>nome</var>)' ou 'counter(<var>nome</var>, <var>estilo</var>)'. O texto gerado será o valor do contador mais próximo do nome fornecido no pseudoelemento. Ele será formatado com o estilo especificado (o padrão é <code>decimal</code>).</p>

 <p>A função <code>counters()</code> também tem duas formas: 'counters(<var>nome</var>, <var>string</var>)' ou 'counters(<var>nome</var>, <var>separador</var>, <var>estilo</var>)'. O texto gerado será o valor de todos os contadores com o mesmo nome no escopo do pseudoelemento, do mais afastado ao mais próximo, separados pelo separador especificado. Os contadores serão exibidos no estilo indicado (o padrão é <code>decimal</code>).</p>
 </dd>
 <dt><code>attr(x)</code></dt>
 <dd>O valor do atributo <code>x</code> do elemento. Se não houver um atributo <code>x</code>, uma <em lang="en">string</em> vazia será retornada. A diferenciação de maiúsculas e minúsculas dependerá da linguagem do documento.</dd>
 <dt><code>open-quote</code> | <code>close-quote</code></dt>
 <dd>Esses valores serão substituídos pela <em lang="en">string</em> apropriada da propriedade {{cssxref("quotes")}}.</dd>
 <dt><code>no-open-quote</code> | <code>no-close-quote</code></dt>
 <dd>Não introduzem nenhum conteúdo, mas aumentam (ou diminuem) o nível de aninhamento de aspas.</dd>
</dl>

<h3 id="Sintaxe_formal">Sintaxe formal</h3>

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

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

<h3 id="Cabeçalhos_e_citações">Cabeçalhos e citações</h3>

<p>Este exemplo insere aspas ao redor de citações e adiciona a palavra "Capítulo" antes dos cabeçalhos.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;h1&gt;5&lt;/h1&gt;
&lt;p&gt;De acordo com o Sr. Tim Berners-Lee,
  &lt;q cite="http://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;
  Devemos entender que não há nada fundamentalmente errado em criar
  algo com base nas contribuições de outras pessoas.
&lt;/p&gt;

&lt;h1&gt;6&lt;/h1&gt;
&lt;p&gt;De acordo com o Manifesto Mozilla,
  &lt;q cite="https://www.mozilla.org/about/manifesto/"&gt;As pessoas
    precisam ter a capacidade de moldar a Internet e suas
    experiências com ela.&lt;/q&gt;
  Portanto, podemos concluir que contribuir para a Web aberta pode
  proteger nossas próprias experiências individuais nela.
&lt;/p&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">q {
  color: blue;
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

h1::before  {
  content: "Cap\00EDtulo ";  /* O espaço no final cria uma separação
                                entre o conteúdo adicionado e o
                                resto do conteúdo */
}</pre>

<h4 id="Resultado">Resultado</h4>

<p>{{EmbedLiveSample('Headings_and_quotes', '100%', 200)}}</p>

<h3 id="Imagem_combinada_com_texto">Imagem combinada com texto</h3>

<p>Este exemplo insere uma imagem antes do <em lang="en">link</em>. Se a imagem não for encontrada, o texto será exibido no seu lugar.</p>

<h4 id="HTML_2">HTML</h4>

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

<h4 id="CSS_2">CSS</h4>

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

<h4 id="Resultado_2">Resultado</h4>

<p>{{EmbedLiveSample('Image_combined_with_text', '100%', 60)}}</p>

<h3 id="Alterando_classes_específicas">Alterando classes específicas</h3>

<p>Este exemplo insere texto adicional no final de itens especiais em uma lista.</p>

<h4 id="HTML_3">HTML</h4>

<pre class="brush: html">&lt;h2&gt;Categoriass mais vendidas&lt;/h2&gt;
&lt;ol&gt;
  &lt;li&gt;Suspenses políticos&lt;/li&gt;
  &lt;li class="new-entry"&gt;Histórias de terror&lt;/li&gt;
  &lt;li&gt;Biografias&lt;/li&gt;
  &lt;li class="new-entry"&gt;Romances de Vampiros&lt;/li&gt;
&lt;/ol&gt;</pre>

<h4 id="CSS_3">CSS</h4>

<pre class="brush: css">.new-entry::after {
  content: " Novo!";  /* O espaço no final cria uma separação
                         entre o conteúdo adicionado e o
                         resto do conteúdo */
  color: red;
}</pre>

<h4 id="Resultado_3">Resultado</h4>

<p>{{EmbedLiveSample('Targeting_classes', '100%', 160)}}</p>

<h3 id="Imagens_e_atributos_de_elementos">Imagens e atributos de elementos</h3>

<p>Este exemplo insere uma imagem antes de cada <em lang="en">link</em> e adiciona o conteúdo do seu atributo <code>id</code> depois.</p>

<h4 id="HTML_4">HTML</h4>

<pre class="brush: html">&lt;ul&gt;
  &lt;li&gt;&lt;a id="moz" href="http://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="CSS_4">CSS</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="Resultado_4">Resultado</h4>

<p>{{EmbedLiveSample('Images_and_element_attributes', '100%', 160)}}</p>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName("CSS3 Content", "#content-property", "content")}}</td>
   <td>{{Spec2("CSS3 Content")}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName("CSS2.1", "generate.html#content", "content")}}</td>
   <td>{{Spec2("CSS2.1")}}</td>
   <td>Definição inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade_com_navegadores">Compatibilidade com navegadores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Recurso</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Suporte Básico</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1")}}</td>
   <td>8.0</td>
   <td>4.0</td>
   <td>1.0</td>
  </tr>
  <tr>
   <td>Suporte a <code>url()</code></td>
   <td>1.0</td>
   <td>{{CompatUnknown}}</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>Recurso</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte Básico</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>8.0</td>
   <td>9.5</td>
   <td>1.0</td>
  </tr>
  <tr>
   <td>Suporte a <code>url()</code></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Veja_também">Veja também</h2>

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