Os pseudoelementos são um dos seletores mais avançados disponíveis para uso em CSS. O principal objetivo desses seletores é criar um estilo único, sem alterar o documento HTML que é usado para criar a estrutura básica de uma determinada página da web.

Veja como usar pseudoelementos em CSS.

Pseudo-elementos comuns

Existe uma extensa lista de pseudoelementos disponíveis para facilitar a vida de um desenvolvedor web. Alguns desses pseudo-elementos incluem:

• Antes de
• Depois de
• Pano de fundo
• Primeira linha
• Primeira carta

Em situações específicas, alguns pseudo-elementos provarão ser mais adequados do que outros, mas a única coisa que permanece constante é a estrutura geral para usar qualquer pseudo-elemento.

Exemplo de estrutura de pseudo-elementos

selector:: pseudo-element {
/ * código css * /
} 

Embora você possa use um elemento HTML como seletor, é recomendável que você use uma classe ou um id para evitar almejar elementos não intencionais em seu layout. O elemento, estilo ou dados que você gostaria de inserir na posição desejada devem ser colocados entre as chaves.

Os pseudoelementos antes e depois são os mais populares da lista e, dado que existem muitas maneiras práticas de usá-los, não é difícil entender por quê.

Usando o Pseudo-elemento Antes em CSS

Embora não seja impossível, é difícil sobrepor imagens com texto legível em CSS. Isso ocorre principalmente porque a imagem e o texto ocupariam a mesma posição em uma página da web.

É relativamente fácil enviar uma imagem para o fundo de um grupo de texto, mas quando a imagem é muito brilhante, ela tende a sobrecarregar o texto que está acima dela. Nesses casos, a próxima etapa é tentar tornar a imagem menos opaca usando a propriedade opacity.

O único problema é que, como a imagem e o texto ocupam a mesma posição, o texto também se tornará um tanto transparente.

Uma das poucas maneiras eficazes de resolver esse problema é usando o pseudoelemento before.

Usando o Exemplo do Pseudoelemento Antes

.landingPage {
/ * Organiza o texto na sobreposição de imagem * /
display: flex;
direção flexível: coluna;
justificar-conteúdo: centro;
alinhar-itens: centro;
alinhamento de texto: centro;
/ * define a página para se ajustar a diferentes tamanhos de tela * /
altura: 100vh;
}
.landingPage:: before {
contente:'';
/ * importa uma imagem * /
background: url ( https://source.unsplash.com/_1EYIHRG014/1600x900)
centro / tampa sem repetição;
/ * coloca uma sobreposição no topo da imagem * /
opacidade: 0,4;
/ * torna a imagem visível * /
posição: absoluta;
topo: 0;
esquerda: 0;
largura: 100%;
altura: 100%;
}

O código acima foi criado para ser usado em uníssono com a classe HTML landingPage abaixo. Conforme mostrado no código acima, usando o pseudo-elemento before, podemos direcionar a imagem e usar a propriedade opacity nela antes que a imagem seja combinada com o texto.

Usando o pseudo-elemento Before


Este é o resultado do uso do pseudoelemento anterior
para sobrepor e imagem com texto legível.

Isso resultará em uma sobreposição colocada na imagem e um texto claro sendo exibido na parte superior, conforme mostrado na imagem abaixo:

Usando o Pseudo-elemento After em CSS

Um uso prático para o pseudoelemento after é ajudar na criação de um formulário HTML. A maioria dos formulários é criada com um conjunto de campos que requerem dados para que o formulário seja enviado com êxito.

Uma maneira de indicar que um campo em um formulário requer dados é colocando um asterisco após o rótulo desse campo. O pseudo-elemento after fornece uma maneira prática de fazer isso.

Usando o Exemplo do Pseudoelemento Depois

.required:: after {
contente: '*';
cor vermelha;
} 

Inserir o código acima na seção CSS do seu formulário garantirá que cada rótulo que contém a classe necessária seja seguido diretamente por um asterisco vermelho. O pseudo-elemento posterior também é prático neste exemplo porque ajuda a separar o estilo da estrutura (o que é sempre ideal no desenvolvimento de software).

A propriedade de conteúdo

Conforme mostrado no exemplo anterior do pseudoelemento, a propriedade content é a ferramenta usada para inserir novo conteúdo em uma página da web. Esta propriedade é usada apenas com os pseudoelementos antes e depois.

É importante notar que mesmo se não houver conteúdo disponível para alimentar a propriedade content (como no exemplo do pseudoelemento anterior acima), você ainda precisa usar a propriedade content dentro dos parâmetros do pseudoelemento antes ou depois para fazê-los funcionar como destinada.

Agora você pode usar pseudoelementos em CSS

Neste artigo, você aprendeu como identificar e usar pseudoelementos em seus programas CSS. Você foi apresentado aos pseudo-elementos antes e depois e recebeu maneiras práticas de usar ambos. Você também pôde ver por que a propriedade content é necessária para o uso bem-sucedido dos pseudo-elementos antes e depois.

10 exemplos de código CSS simples que você pode aprender em 10 minutos

Quer saber mais sobre como usar CSS? Experimente estes exemplos básicos de código CSS para começar e, em seguida, aplique-os às suas próprias páginas da web.

Leia a seguir

Sobre o autor