content
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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 \00A0 para */
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;
Initial value | normal |
---|---|
Aplica-se a | All elements, tree-abiding pseudo-elements, and page margin boxes |
Inherited | não |
Computed value | On elements, always computes to normal . On ::before and ::after , if normal is specified, computes to none . Otherwise, for URI values, the absolute URI; for attr() values, the resulting string; for other keywords, as specified. |
Animation type | discrete |
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()
oucounters()
.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 atributox
, 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> | <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> ) |
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
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
Specification |
---|
CSS Generated Content Module Level 3 # content-property |
Compatibilidade com navegadores
BCD tables only load in the browser