Como usar os pseudo-elementos antes e depois em CSS

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.



como conectar wii à smart tv

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
  • 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, dado que existem muitas maneiras práticas de usá-los, não é difícil ver 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{
/* 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.





This is the result of using the before pseudo-element
to overlay and image with readable text.


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).

como forçar a redefinição de fábrica do Windows 10

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.

Compartilhado Compartilhado Tweet O email 10 exemplos de código CSS simples que você pode aprender em 10 minutos

Precisa de ajuda com 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 Tópicos relacionados
  • Programação
  • Designer de Web
  • CSS
Sobre o autor Kadeisha Kean(21 artigos publicados)

Kadeisha Kean é um desenvolvedor de software full-stack e redator técnico / de tecnologia. Ela tem a habilidade distinta de simplificar alguns dos conceitos tecnológicos mais complexos; produzindo material que pode ser facilmente entendido por qualquer novato em tecnologia. Ela é apaixonada por escrever, desenvolver softwares interessantes e viajar pelo mundo (através de documentários).

Mais de Kadeisha Kean

Assine a nossa newsletter

Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!

Clique aqui para se inscrever