Pseudoelementos

O podcast CSS - 014: Pseudoelementos

Se você tiver um artigo de conteúdo e quiser que a primeira letra seja uma maiúscula inicial muito maior, como fazer 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 precisar adicionar mais HTML. Esse exemplo de solução, que usa ::first-letter, é um dos muitos pseudoelementos. Eles têm várias funções, e nesta lição você vai 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 lembre-se de que qualquer coisa que não seja uma string vazia provavelmente será anunciada por um leitor de tela. Você pode adicionar uma imagem url, que insere uma imagem nas dimensões originais, para que não seja possível redimensioná-la. Também é possível inserir um counter.

Depois que um elemento ::before ou ::after é criado, é possível estilizá-lo da maneira que 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 lição. Vale lembrar que nem todas as propriedades do 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 permite estilizar a 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;
}

Assim como o pseudoelemento ::first-letter, há apenas um subconjunto de propriedades CSS que você pode usar:

• color
• background propriedades
• font propriedades
• text propriedades

::backdrop

Se você tiver um elemento apresentado no modo de tela cheia, como um <dialog> ou um <video>, é possível estilizar o plano 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 de 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

É possível mudar o símbolo do marcador usando a propriedade content. Você pode usar isso para definir um símbolo de mais e menos para os estados fechados e vazios de um elemento <summary>, por exemplo.

::selection

O pseudoelemento ::selection permite estilizar 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 em combinação com outros seletores para um estilo de seleção mais específico.

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

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

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

::placeholder

É possível adicionar uma dica de ajuda a elementos de formulário, como <input> com um atributo placeholder. O pseudoelemento ::placeholder permite estilizar esse texto.

input::placeholder {
  color: darkcyan;
}

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

• color
• background propriedades
• font propriedades
• text propriedades

::cue

O último pseudoelemento deste tour é o ::cue. Isso permite que você defina o estilo das dicas do WebVTT, que são as legendas de um elemento <video>.

Também é possível transmitir um seletor para um ::cue, o que permite estilizar 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