---
title: content
slug: Web/CSS/content
translation_of: Web/CSS/content
---
<p><span class="lang lang-pt">« <a href="/pt/Refer%c3%aancia_CSS" title="https://developer.mozilla.org/pt/Referência_CSS">Referência CSS</a></span></p>
<h3 id="Resumo">Resumo</h3>
<p>A propriedade <code>content</code> é usada com os pseudo-elementos <a href="/pt/CSS/%3abefore" title="pt/CSS/:before"><code>:before</code></a> e <a href="/pt/CSS/:after" title="pt/CSS/:after"><code>:after</code></a> para gerar conteúdo com o elemento.</p>
<ul> <li>Valor inicial: <code>normal</code></li> <li>Aplica-se a: Pseudo-elementos <code>:before</code> e <code>:after</code></li> <li>Herdado: não</li> <li>Mídia: todas</li> <li>Valor computado: <ul> <li>Em <code>:before</code> e <code>:after</code>, <code>normal</code> é computado como <code>none</code></li> <li>Para elementos sempre é computado como <code>normal</code></li> <li>Endereços são convertidos para absolutos</li> <li>Quando for <code>attr()</code>, o valor será o mesmo do atributo escolhido</li> <li>Para outras, fica como o especificado</li> </ul> </li>
</ul>
<h3 id="Sintáxe">Sintáxe</h3>
<pre>content: normal | none |
       [ &lt;string&gt; | &lt;uri&gt; | &lt;counter&gt; | attr() |
         open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
</pre>
<h3 id="Valores">Valores</h3>
<dl> <dt>none</dt> <dd>O pseudo-elemento não é gerado.</dd> <dt>normal</dt> <dd>Computado como<code> none </code>para os pseudo-elementos <code>:before</code> e <code>:after</code>.</dd> <dt>&lt;string&gt;</dt> <dd>Conteúdo de texto.</dd> <dt>&lt;uri&gt;<code> url()</code></dt> <dd>O valor especifica um recurso externo (como uma imagem). Se o recurso não puder ser exibido, ele é ignorado ou um marcador aparece em seu lugar.</dd> <dt>&lt;counter&gt;</dt> <dd>Contadores podem ser especificados como duas funções: 'counter()' ou 'counters()'. O primeiro tem duas formas: 'counter(<var>name</var>)' ou 'counter(<var>name</var>, <var>style</var>)'. <span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="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).">O texto gerado é o valor do contador de intimidades de o nome dado no âmbito deste pseudo-elemento, que é formatado no estilo indicado</span></span> ('decimal' por padrão).A segunda também tem duas formas: 'counters(<var>name</var>, <var>string</var>)' ou 'counters(<var>name</var>, <var>string</var>, <var>style</var>)'. <span class="long_text" id="result_box"><span style="background-color: rgb(255, 255, 255);" title="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.">O texto gerado é o valor de todos os contadores com o nome dado no âmbito deste pseudo-elemento, a partir ultraperiféricas intimidades separadas pela seqüência especificada</span></span>. Os contadores são testados da maneira indicada ('decimal' por padrão). Veja a seção contadores automáticos e numeração para mais informação. O nome não pode ser 'none', 'inherit' ou 'initial'. Isso faz com que a função seja ignorada.</dd> <dt>attr(X)</dt> <dd>Retorna o valor da propriedade X do elemento. Se não existir a propriedade X, será retornado um texto vazio. A diferenciação entre maiúsculas e minúsculas depende do idioma do documento.</dd> <dt>open-quote | close-quote</dt> <dd>Esses valores são trocadas pelo texto apropriado da propriedade <code><a href="/pt/CSS/quotes" rel="custom nofollow" title="pt/CSS/quotes">quotes</a></code>.</dd> <dt>no-open-quote | no-close-quote</dt> <dd>Não introduz conteúdo, previne a inserção em um elemento de um <code>open-quote</code> ou <code>close quote</code>.</dd>
</dl>