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.

Termo-chave : é possível criar um contador nomeado e incrementá-lo com base na posição dele no fluxo do documento. Elas podem ser muito úteis em vários contextos, como na numeração automática de um esboço.

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.

: input[type="checkbox"] é uma exceção. É permitido ter filhos de pseudoelementos.

::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;
}

Observação : só é possível usar :first-letter em contêineres de bloco. Portanto, ele não vai funcionar se você tentar adicioná-lo a um elemento que tenha display: inline.

::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

Browser Support

• 57
• 79
• 51
• 10.1

Source

É 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

Observação : placeholder não é <label> e não deve ser usado no lugar de <label>. Os elementos do formulário precisam ser rotulados ou não serão acessíveis.

::cue

Browser Support

• 26
• 79
• 55
• 7

Source

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

Quais das opções a seguir não são pseudoelementos?

::before

Não se esqueça de adicionar content: '';.

::first-paragraph

Isso não existe no CSS.

::after

Não se esqueça de adicionar content: '';.

::marker

É o elemento de marcador quando você usa um elemento de lista ou um tipo de exibição.

::pencil

Isso não existe no CSS.

:active

Essa é uma pseudoclasse, não um pseudoelemento.

Os pseudoelementos podem ser encontrados em um arquivo HTML.

Verdadeiro

Embora o DevTools possa mostrar pseudoelementos no painel "Elementos", eles não são encontrados no HTML, porque são de propriedade do navegador.

Falso

Elas podem ser direcionadas por CSS, mas não são encontradas no HTML.