content

A propriedade CSS content é usada com os pseudoelementos ::before e ::after para gerar conteúdo em um elemento. Objetos inseridos usando a propriedade content são elementos substituídos anônimos.

/* Palavras-chave que não podem ser combinadas com outros valores */
content: normal;
content: none;
/* Valores <string> com caracteres especiais devem ser escritos */
/* com escape Unicode, por exemplo 00円A0 para &nbsp; */
content: "prefixo";
/* Valores <url> */
content: url("http://www.example.com/test.png");
/* Valores <counter> */
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;

Sintaxe

Valores

none

O pseudoelemento não será gerado.

normal

Equivalente a none para os pseudoelementos ::before e ::after.

<string>

Um ou mais caracteres de texto.

<url>

Uma URL que designa um recurso externo (como uma imagem). Se o recurso não puder ser exibido, ele será ignorado ou um placeholder será exibido no seu lugar.

<counter>()

O valor de um contador CSS, geralmente um número. Ele pode ser exibido usando a função counter() ou counters().

A função counter() tem duas formas: 'counter(nome)' ou 'counter(nome, estilo)'. 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 é decimal).

A função counters() também tem duas formas: 'counters(nome, string)' ou 'counters(nome, separador, estilo)'. 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 é decimal).

attr(x)

O valor do atributo x do elemento. Se não houver um atributo x, uma string vazia será retornada. A diferenciação de maiúsculas e minúsculas dependerá da linguagem do documento.

open-quote | close-quote

Esses valores serão substituídos pela string apropriada da propriedade quotes.

no-open-quote | no-close-quote

Não introduzem nenhum conteúdo, mas aumentam (ou diminuem) o nível de aninhamento de aspas.

Sintaxe formal

content = 
 normal | 
 none | 
 [ <content-replacement> | <content-list> ] [ / [ <string> | <counter> | <attr()> ] + ] ? | 
 <element()> 

<content-replacement> = 
 <image> 

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

<counter> = 
 <counter()> | 
 <counters()> 

<attr()> = 
 attr( <attr-name> <attr-type>? , <declaration-value> ? ) 

<element()> = 
 element( <id-selector> ) 

<image> = 
 <url> | 
 <image()> | 
 <image-set()> | 
 <cross-fade()> | 
 <element()> | 
 <gradient> 

<quote> = 
 open-quote | 
 close-quote | 
 no-open-quote | 
 no-close-quote 

<leader()> = 
 leader( <leader-type> ) 

<target> = 
 <target-counter()> | 
 <target-counters()> | 
 <target-text()> 

<string()> = 
 string( <custom-ident> , [ first | start | last | first-except ] ? ) 

<content()> = 
 content( [ text | before | after | first-letter | marker ] ? ) 

<counter()> = 
 counter( <counter-name> , <counter-style>? ) 

<counters()> = 
 counters( <counter-name> , <string> , <counter-style>? ) 

<attr-name> = 
 [ <ident-token> ? '|' ] ? <ident-token> 

<attr-type> = 
 type( <syntax> ) | 
 raw-string | 
 number | 
 <attr-unit> 

<id-selector> = 
 <hash-token> 

<image()> = 
 image( <image-tags>? [ <image-src>? , <color> ? ]! ) 

<image-set()> = 
 image-set( <image-set-option># ) 

<cross-fade()> = 
 cross-fade( <cf-image># ) 

<leader-type> = 
 dotted | 
 solid | 
 space | 
 <string> 

<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 ] ? ) 

<counter-style> = 
 <counter-style-name> | 
 <symbols()> 

<syntax> = 
 '*' | 
 <syntax-component> [ <syntax-combinator> <syntax-component> ] * | 
 <syntax-string> 

<image-tags> = 
 ltr | 
 rtl 

<image-src> = 
 <url> | 
 <string> 

<image-set-option> = 
 [ <image> | <string> ] [ <resolution> || type( <string> ) ] ? 

<cf-image> = 
 [ <image> | <color> ] && 
 <percentage [0,100]> ? 

<symbols()> = 
 symbols( <symbols-type>? [ <string> | <image> ] + ) 

<syntax-component> = 
 <syntax-single-component> <syntax-multiplier>? | 
 '<' transform-list '>' 

<syntax-combinator> = 
 '|' 

<syntax-string> = 
 <string> 

<symbols-type> = 
 cyclic | 
 numeric | 
 alphabetic | 
 symbolic | 
 fixed 

<syntax-single-component> = 
 '<' <syntax-type-name> '>' | 
 <ident> 

<syntax-multiplier> = 
 '#' | 
 '+' 

<syntax-type-name> = 
 angle | 
 color | 
 custom-ident | 
 image | 
 integer | 
 length | 
 length-percentage | 
 number | 
 percentage | 
 resolution | 
 string | 
 time | 
 url | 
 transform-function 

Exemplos

Cabeçalhos e citações

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

HTML

<h1>5</h1>
<p>
 De acordo com o Sr. Tim Berners-Lee,
 <q cite="https://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
 >
 Devemos entender que não há nada fundamentalmente errado em criar algo com
 base nas contribuições de outras pessoas.
</p>
<h1>6</h1>
<p>
 De acordo com o Manifesto Mozilla,
 <q cite="https://www.mozilla.org/about/manifesto/"
 >As pessoas precisam ter a capacidade de moldar a Internet e suas
 experiências com ela.</q
 >
 Portanto, podemos concluir que contribuir para a Web aberta pode proteger
 nossas próprias experiências individuais nela.
</p>

CSS

q {
 color: blue;
}
q::before {
 content: open-quote;
}
q::after {
 content: close-quote;
}
h1::before {
 content: "Cap00円EDtulo "; /* O espaço no final cria uma separação
 entre o conteúdo adicionado e o
 resto do conteúdo */
}

Resultado

Imagem combinada com texto

Este exemplo insere uma imagem antes do link. Se a imagem não for encontrada, o texto será exibido no seu lugar.

HTML

<a href="https://www.mozilla.org/">Mozilla Home Page</a>

CSS

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

Resultado

Alterando classes específicas

Este exemplo insere texto adicional no final de itens especiais em uma lista.

HTML

<h2>Categoriass mais vendidas</h2>
<ol>
 <li>Suspenses políticos</li>
 <li class="new-entry">Histórias de terror</li>
 <li>Biografias</li>
 <li class="new-entry">Romances de Vampiros</li>
</ol>

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;
}

Resultado

Imagens e atributos de elementos

Este exemplo insere uma imagem antes de cada link e adiciona o conteúdo do seu atributo id depois.

HTML

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

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("mdn-favicon16.png");
}
li {
 margin: 1em;
}

Resultado

Especificações

Compatibilidade com navegadores

Veja também

• ::after
• ::before
• quotes