content

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: "Cap\00EDtulo "; /* 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