Enquanto desenvolve um site, os desenvolvedores da Web geralmente encontram situações em que é necessário estilizar uma certa parte de um elemento ou adicionar determinado conteúdo antes ou depois de um determinado elemento. Todas essas tarefas podem ser executadas usando pseudo-elementos fornecidos no CSS. Este post ensinará tudo sobre pseudo-elementos.

Você passará pelos seguintes tópicos neste post.

1. O que são pseudo-elementos no CSS
2. ::primeira carta
3. ::primeira linha
4. ::antes
5. ::depois
6. ::seleção

O que são pseudo-elementos no CSS

Pseudo-elementos são palavras-chave que são usadas para estilizar uma parte específica de um elemento especificado. Estes são inseridos em um seletor quando elementos de estilo. Por exemplo, você deseja dar alguma cor à primeira letra de um elemento ou deseja adicionar algum texto antes de um determinado elemento.

Sintaxe

Selector :: Pseudo-Element
valor da propriedade;

Aqui, destacamos alguns dos importantes pseudo-elementos para o seu melhor entendimento.

::primeira carta

Isso é usado para dar um certo estilo à primeira letra de algum texto, além disso, é aplicado apenas nos elementos no nível do bloco. Ele suporta muitas propriedades CSS, como cor, fonte, margem, borda, preenchimento, fundo, etc.

Exemplo

Siga o código abaixo para entender como esse elemento funciona.

Html

Pseudo-elementos

Aqui nós definimos um

elemento.

CSS

H1 :: Primeira letra
Cor: Sandybrown;
estilo de fonte: itálico;
Size da fonte: 50px;

Estamos dando cor Sandybrown, estilo de fonte em itálico e tamanho de fonte de 50px para a primeira letra do cabeçalho usando o :: Pseudo-Elemento de Primeira Letra.

Saída

A primeira letra do cabeçalho foi estilizada usando o Pseudo-Elemento de Primeira Letra.

::primeira linha

Como o nome sugere, isso é usado para dar algum estilo à primeira linha de um texto, além disso, é aplicável apenas a elementos no nível do bloco. Ele suporta algumas propriedades CSS que são cores, fontes, fundo, etc.

Exemplo

Suponha que você queira dar alguma cor, estilo e peso à primeira linha de um

elemento. Siga o código abaixo.

Html

Como o nome sugere, este pseudo-elemento é usado para modelar a primeira linha de um texto. Este elemento também só pode ser aplicado aos elementos de nível de bloco. Ele suporta algumas propriedades CSS que são cores, fontes, fundo, etc.

No código acima, definimos um

elemento e adicionou algum texto nele.

CSS

P :: Primeira linha
cor roxa;
estilo de fonte: itálico;
intensidade da fonte: Negrito;

Usando o :: Pseudo-elementos de primeira linha, estamos dando um pouco de cor, estilo de fonte e peso da fonte apenas da primeira linha do parágrafo.

Saída

A primeira linha do parágrafo foi estilizada com sucesso.

::antes

Com o objetivo de adicionar conteúdo antes de uma certa parte de um elemento, o :: antes do elemento pseudo-elemento é usado. Ele suporta propriedade de conteúdo CSS.

Exemplo

Suponha que você queira adicionar aspas no início de um parágrafo. Use o seguinte código.

Html

Este é um parágrafo.

Aqui estamos definindo nosso parágrafo antes do qual todos adicionamos uma cotação.

CSS

P :: antes
contente: '"';
cor azul;
Size da fonte: 25px;

No código acima, estamos adicionando uma onda antes do parágrafo e dando-lhe a cor azul, e definindo seu tamanho para 25px usando o :: antes do pseudo-elemento.

Saída

A cotação foi adicionada usando com sucesso o :: antes do pseudo-elemento.

::depois

Isso funciona de maneira semelhante ao :: antes do elemento, com a única diferença de que ele insere conteúdo após uma certa parte de um elemento. Este elemento também é usado com a propriedade de conteúdo CSS.

Exemplo

Siga o exemplo abaixo para entender o funcionamento do :: após o elemento.

Html

Folhas de estilo em cascata

Aqui nós especificamos um

elemento e adicionou algum conteúdo a ele.

CSS

H1 :: depois
Conteúdo: '(pseudo-elementos)';
cor azul;
Size da fonte: 15px;

Estamos adicionando certos conteúdos após o

elemento, dando a essa cor azul de conteúdo específica e definindo seu tamanho de fonte para 15px.

Saída

O conteúdo foi adicionado após o título.

::seleção

Para estilizar um elemento que um usuário seleciona, o pseudo-elemento :: seleção é usado. Ele suporta algumas propriedades CSS que são cores, fundo, etc.

Exemplo

Suponha que você queira que um certo elemento seja destacado quando um usuário o selecionar. Siga o código abaixo.

Html

Alguns cabeçalham

Aqui estamos especificando um título.

CSS

H1 :: Seleção
Background-Color: Hotpink;

No código acima, estamos usando o Pseudo-Elemento de Seleção para dar uma cor rosa sempre que o usuário o selecionar.

Saída

O pseudo-elemento :: seleção está funcionando corretamente.

Conclusão

Pseudo-elementos são palavras-chave que são usadas para estilizar uma parte específica de um elemento especificado. Existem vários pseudo-elementos no CSS, no entanto, alguns dos pseudo-elementos mais importantes e comumente usados ​​são; ::primeira carta, ::primeira linha, ::antes, ::depois, e ::seleção. Cada um deles é usado para diferentes fins de estilo que é explicado em detalhes neste post, juntamente com a ajuda de exemplos adequados.