content

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.

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

<content-replacement> = 
 <image> 

<content-list> = 
 [ <string> | <counter()> | <counters()> | <content()> | <attr()> ]+ 

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

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

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

<image> = 
 <url> |
 <gradient> 

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

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

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

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

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

<id-selector> = 
 <hash-token> 

<url> = 
 <url()> |
 <src()> 

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

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

<url()> = 
 url( <string> <url-modifier>* ) |
 <url-token> 

<src()> = 
 src( <string> <url-modifier>* ) 

<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 

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

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

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

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

• ::after
• ::before
• quotes