Pseudoelementos

O Podcast do CSS - 014: Pseudoelementos

Se você tem um artigo de conteúdo e quer que a primeira letra seja um limite muito maior, como faz isso?

No CSS, é possível usar o pseudoelemento ::first-letter para conseguir esse tipo de detalhe de design.

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

Um pseudoelemento é como adicionar ou segmentar um elemento extra sem ter que adicionar mais HTML. Esta solução de exemplo, usando ::first-letter, é um dos muitos pseudoelementos. Eles têm diversas funções e, nesta lição, você aprenderá quais pseudoelementos estão disponíveis e como usá-los.

::before e ::after

Os pseudoelementos ::before e ::after criam um elemento filho dentro de um elemento somente se você definir uma propriedade content.

.my-element::before {
    content: "";
}

.my-element::after {
    content: "";
}

O content pode ser qualquer string, até mesmo uma vazia, mas esteja ciente de que qualquer coisa diferente de uma string vazia provavelmente será anunciada por um leitor de tela. Você pode adicionar uma imagem url, que vai inserir uma imagem nas dimensões originais, e não será possível redimensioná-la. Você também pode inserir um counter.

Depois que um elemento ::before ou ::after é criado, é possível estilizá-lo como quiser, sem limites. Só é possível inserir um elemento ::before ou ::after em um elemento que aceite elementos filhos (elementos com uma árvore de documentos). Portanto, elementos como <img />, <video> e <input> não vão funcionar.

::first-letter

Conhecemos esse pseudoelemento no início da aula. Vale lembrar que nem todas as propriedades CSS podem ser usadas ao segmentar ::first-letter. As propriedades disponíveis são:

• color
• Propriedades background (como background-image)
• Propriedades border (como border-color)
• float
• Propriedades font (como font-size e font-weight)
• propriedades de texto (como text-decoration e word-spacing)

p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

::first-line

O pseudoelemento ::first-line permitirá que você defina o estilo da primeira linha de texto somente se o elemento com ::first-line aplicado tiver um valor display de block, inline-block, list-item, table-caption ou table-cell.

p::first-line {
  color: goldenrod;
  font-weight: bold;
}

Como o pseudoelemento ::first-letter, há apenas um subconjunto de propriedades CSS que pode ser usado:

• color
• background propriedades
• font propriedades
• text propriedades

::backdrop

Se você tiver um elemento apresentado no modo de tela cheia, como uma <dialog> ou uma <video>, poderá estilizar o pano de fundo (o espaço entre o elemento e o restante da página) com o pseudoelemento ::backdrop:

video::backdrop {
  background-color: goldenrod;
}

::marker

O pseudoelemento ::marker permite estilizar o marcador ou o número de um item da lista ou a seta de um elemento <summary>.

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

Apenas um pequeno subconjunto de propriedades CSS é compatível com ::marker:

• color
• content
• white-space
• font propriedades
• Propriedades animation e transition

Para alterar o símbolo do marcador, use a propriedade content. Você pode usá-lo, por exemplo, para definir um símbolo de mais e menos para os estados fechado e vazio de um elemento <summary>.

::selection

O pseudoelemento ::selection permite que você estilize a aparência do texto selecionado.

::selection {
  background: green;
  color: white;
}

Esse pseudoelemento pode ser usado para estilizar todo o texto selecionado, como na demonstração acima. Ele também pode ser usado com outros seletores para um estilo de seleção mais específico.

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

Assim como acontece com outros pseudoelementos, apenas um subconjunto de propriedades CSS é permitido:

• color
• background-color, mas não background-image
• text propriedades

::placeholder

Você pode adicionar uma dica auxiliar para elementos de formulário, como <input> com um atributo placeholder. O pseudoelemento ::placeholder permite definir o estilo desse texto.

input::placeholder {
  color: darkcyan;
}

O ::placeholder só oferece suporte a um subconjunto de regras CSS:

• color
• background propriedades
• font propriedades
• text propriedades

::cue

Por último, neste tour pelos pseudoelementos, está o pseudoelemento ::cue. Isso permite estilizar as dicas WebVTT, que são as legendas de um elemento <video>.

Você também pode transmitir um seletor para um ::cue, o que permite definir o estilo de elementos específicos dentro de uma legenda.

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

Teste seu conhecimento

Teste seus conhecimentos sobre pseudoelementos