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
(comobackground-image
) - Propriedades
border
(comoborder-color
) float
- Propriedades
font
(comofont-size
efont-weight
) - propriedades de texto (como
text-decoration
eword-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
propriedadesfont
propriedadestext
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
etransition
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ãobackground-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
propriedadesfont
propriedadestext
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
Quais das opções a seguir não são pseudoelementos?
::before
content: '';
.::first-paragraph
::after
content: '';
.::marker
::pencil
:active
Os pseudoelementos podem ser encontrados em um arquivo HTML.