Conteúdo - CSS-Tricks

Anonim

A contentpropriedade em CSS é usada em conjunto com os pseudoelementos ::beforee ::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: blockalguma 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.