Como usar os pseudo-elementos antes e depois em CSS

Os pseudoelementos são um dos seletores mais avançados disponíveis para uso em CSS. O principal objetivo por trás 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{
 /* css code */
 }

Embora você possa usar um elemento HTML como seletor , é recomendável usar 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, visto que existem muitas maneiras práticas de usá-los, não é difícil perceber 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 plano de fundo de um grupo de texto , mas quando essa 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{
 /* Arranges the text on the image overlay */
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 text-align: center;
 /*sets the page to adjust to different screen sizes*/
 height: 100vh;
 }
 .landingPage::before{
 content:'';
 /*imports an image*/
 background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
 no-repeat center/cover;
 /*places an overlay on top of the image*/
 opacity: 0.4;
 /*makes the image visible*/
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 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.

 
<div class="landingPage">
 <h1>Using the Before pseudo-element</h1>
 <p>
 This is the result of using the before pseudo-element
 to overlay and image with readable text.
 </p>
 </div>

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 de Pseudoelemento Depois

 
.required::after{
 content: '*';
 color: red;
 }

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

Como mostrado no exemplo de pseudoelemento posterior acima, 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 observar que mesmo se não houver conteúdo disponível para alimentar a propriedade content (como no exemplo do pseudoelemento anterior acima), você ainda precisará usar a propriedade content dentro dos parâmetros de antes ou depois pseudo-elemento para fazer com que funcionem como pretendido.

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 conseguiu ver por que a propriedade content é necessária para o uso bem-sucedido dos pseudoelementos antes e depois.