A content
propriedade em CSS é usada em conjunto com os pseudoelementos ::before
e ::after
. É usado para inserir conteúdo literalmente. Pode ter quatro tipos de valor.
Fragmento
.name::before ( content: "Name: "; )
Em seguida, um elemento como este:
Chris
Seria renderizado assim:
Name: Chris
Também pode ser uma string vazia, que é comumente vista em coisas como o clearfix.
Contador
div::before ( content: counter(my-counter); )
Mais informações sobre isso.
Imagem
div::before ( content: url(image.jpg.webp); )
Esta é literalmente uma imagem na página como seria. Também pode ser um gradiente. Observe que você não pode alterar as dimensões da imagem quando inserida desta forma. Você também pode inserir uma imagem usando uma string vazia para o conteúdo, criando de
display: block
alguma forma, dimensionando e usando background-image
. Dessa forma, você pode redimensioná-lo com background-size
.
Atributo
Você pode usar valores (cadeias de caracteres, de qualquer maneira) que são obtidos diretamente de atributos no HTML.
60
(data-visual-label)::before ( content: attr(data-visual-label) ": "; ) /* Classic print trick! Show URLs! */ @media (print) ( a(href)::after ( content: " (" attr(href) ") "; /* you could combine a url() in here even if you wanted */ ) )
A attr()
função ainda não tem “tipos”, então você não pode passar um valor como 20px
(apenas strings), mas algum dia!
Texto Alternativo
A especificação diz que você pode usar um /
na sintaxe para listar o texto alternativo. Por exemplo…
.el::before ( content: "⭐️" / "Alternate Text for that star"; content: "→" / ""; /* Visual only, don't read. */ )
Talvez você possa usá-lo como ...
- Make Bed
- Grocery Shop
- Sweep Driveway
(data-alt-pseudo="Completed")::before ( content: "✅"; /* fallback */ content: "✅" / attr(data-alt-pseudo); )
Mais Informações
O conteúdo inserido dessa forma não está realmente no DOM, portanto, possui algumas limitações. Por exemplo, você não pode anexar um evento diretamente (apenas) a pseudoelementos. Também é inconsistente se o texto inserido dessa forma é ou não lido por leitores de tela (geralmente é hoje em dia) ou se você pode selecioná-lo (geralmente não é hoje em dia).
- Coisas legais que os elementos pseuedo podem fazer
- Apresentação sobre pseudo elementos
- MDN Docs
Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
cromada | Raposa de fogo | IE | Beira | Safári |
---|---|---|---|---|
4 | 2 | 9 | 12 | 3,1 |
Celular / Tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
88 | 85 | 2,1 | 3,2 |
Para Opera, url()
compatível apenas com a versão 7 ou superior.