Propriedade CSS content
A propriedade content é usada com ::before e ::after para gerar conteúdo dentro de um elemento. Veja exemplos práticos.
A propriedade content é usada com os pseudo-elementos ::before e ::after para gerar conteúdo dentro de um elemento. Sem um valor explícito, esses pseudo-elementos não são renderizados, portanto content é o que faz uma caixa gerada aparecer.
Esta página explica quando e como usar content: inserindo texto simples, obtendo valores de atributos com attr(), numerando elementos com contadores CSS, incorporando imagens e aspas, além dos erros comuns (como o texto gerado ser inacessível para leitores de tela).
A propriedade aceita os seguintes valores:
- normal
- none
- counter
- attr
- string
- open-quote
- close-quote
- no-open-quote
- no-close-quote
- url
O texto inserido com content não faz parte do DOM — não é possível selecioná-lo como texto normal, e o suporte por tecnologias assistivas é inconsistente. Use-o para conteúdo decorativo ou complementar, não para conteúdo que precisa estar sempre disponível para todos os leitores. A propriedade quotes deve ser definida no elemento para que open-quote e close-quote renderizem aspas reais.
| Valor inicial | normal |
|---|---|
| Aplica-se a | Pseudo-elementos ::before e ::after. |
| Herdado | Não. |
| Animável | Não. |
| Versão | CSS2 |
| Sintaxe DOM | element.style.content = "none"; |
Sintaxe
Sintaxe da propriedade CSS content
content: normal | none | counter | attr | string | open-quote | close-quote | no-open-quote | no-close-quote | url | initial | inherit;Exemplo da propriedade content:
Exemplo da propriedade CSS content com o valor normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::before {
content: "Name -";
}
.country::before {
content: normal;
}
</style>
</head>
<body>
<h2>Content property example</h2>
<p>My name is John</p>
<p class="country">I live in Canada</p>
</body>
</html>Resultado
Exemplo da propriedade content com o valor "string":
Exemplo da propriedade CSS content com o valor string
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:before {
content: "List item";
}
p:after {
content: " with string value.";
}
</style>
</head>
<body>
<h2>Content property example</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<p>Here is some paragraph</p>
</body>
</html>No exemplo a seguir, você pode ver que open-quote não pode aparecer sem close-quote.
Exemplo da propriedade content com o valor "open-quote":
Exemplo da propriedade content com os valores open-quote e close-quote
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
quotes: open-quote close-quote;
}
p::before {
content: open-quote;
}
p::after {
content: close-quote;
}
</style>
</head>
<body>
<h2>Content property example</h2>
<p>Hello, my name is John</p>
<p>I am from Canada</p>
</body>
</html>Exemplo da propriedade content com os valores "open-quote" e "no-close-quote":
Exemplo da propriedade content com os valores "open-quote" e "no-close-quote":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p::before {
content: open-quote;
}
p::after {
content: no-close-quote;
}
</style>
</head>
<body>
<p>Example with content property</p>
</body>
</html>Usando o valor attr() para ler um atributo
attr() obtém o valor de um atributo HTML e o insere no conteúdo gerado. Um uso comum é exibir o destino de um link ou mostrar um atributo data-* como um rótulo semelhante a um tooltip. O valor do atributo é sempre tratado como uma string.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a::after {
content: " (" attr(href) ")";
color: #888;
}
</style>
</head>
<body>
<p>Visit <a href="https://www.w3docs.com">W3docs</a> to learn more.</p>
</body>
</html>Isso renderiza o link como Visit W3docs (https://www.w3docs.com) to learn more. — note como uma string e attr() são concatenados simplesmente escrevendo-os um ao lado do outro.
Usando contadores para numerar elementos
Os contadores CSS permitem gerar números sequenciais sem modificar o HTML. Você inicializa um contador com counter-reset, o incrementa com counter-increment e o exibe com a função counter() dentro de content. Esta é a forma idiomática de numerar títulos, etapas ou figuras.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h2>Introduction</h2>
<h2>Installation</h2>
<h2>Usage</h2>
</body>
</html>Cada <h2> é prefixado automaticamente com Section 1: , Section 2: e Section 3: .
Inserindo uma imagem com o valor url()
O valor url() incorpora um recurso externo — normalmente um ícone pequeno — na caixa gerada. Funciona bem para marcadores decorativos, mas como a imagem não está no DOM ela não possui texto alternativo, portanto evite usá-la para imagens significativas.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.external::after {
content: url("https://www.w3docs.com/build/img/favicon.ico");
margin-left: 5px;
}
</style>
</head>
<body>
<p class="external">A link to an external resource</p>
</body>
</html>O conteúdo gerado é decorativo por padrão. Leitores de tela podem ignorá-lo ou lê-lo de forma inconsistente entre navegadores, e os usuários não conseguem copiá-lo. Nunca coloque texto que o leitor não pode perder (como um preço ou uma mensagem de erro) apenas dentro de um valor content.
Valores
| Valor | Descrição |
|---|---|
| normal | Define o conteúdo como normal. Este é o valor padrão. |
| none | Define o conteúdo como vazio. O pseudo-elemento não é gerado. |
| counter | Define o conteúdo como um valor de contador. |
| attr | Define o conteúdo como o valor de um atributo no elemento selecionado. |
| string | Define o conteúdo como uma cadeia de texto. |
| open-quote | Define o conteúdo como uma aspa de abertura. |
| close-quote | Define o conteúdo como uma aspa de fechamento. |
| no-open-quote | Remove a aspa de abertura do conteúdo. |
| no-close-quote | Remove a aspa de fechamento do conteúdo. |
| url | Define o conteúdo como uma URL que aponta para um recurso, como uma imagem, som ou vídeo. Se a imagem não puder ser exibida, será ignorada ou um placeholder será mostrado. |
| initial | Define a propriedade com seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |
Propriedades relacionadas
A propriedade content só tem efeito em caixas geradas, portanto quase sempre é usada em conjunto com os pseudo-elementos que as criam:
- ::before — insere conteúdo gerado antes do conteúdo próprio de um elemento.
- ::after — insere conteúdo gerado após o conteúdo próprio de um elemento.