CSS HTML

Como utilizar pseudo-elementos no CSS

3 de outubro de 2019

Como utilizar pseudo-elementos no CSS

Neste post vamos aprender como utilizar os pseudo-elementos do CSS e também vamos praticar os seus principais casos de uso com situações do dia a dia.

pseudo elementos css capa

O que são pseudo-elementos no CSS?

Pseudo-elementos são regras de CSS que ao serem adicionadas a um elemento presente na página vão adicionar estilo ao que o pseudo-elemento se refere

Por exemplo: O pseudo-elemento ::after ao ser atrelado a uma tag já existente na página, cria um elemento novo após este primeiro

Então podemos dizer que a função do pseudo-elemento é ajudar a estilizar o HTML sem termos que criar novos elementos ou fazer alguma gambiarra com HTML ou CSS

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

Qual a sintaxe dos pseudo-elementos?

Sempre que vamos utilizar, chamamos eles assim:

div::before {
 /* algum estilo */
}

Supondo que haja uma div no HTML é claro

Então neste exemplo acima estamos adicionando um pseudo-elemento ::before a divs do HTML

O before ao contrário do after, adiciona um elemento antes do elemento que foi aplicada a regra

Veja um exemplo que utilizamos ::after e ::before exaustivamente para construir uma estrela com CSS.

Pseudo-elementos que existem:

Vamos agora ver quais pseudo-elementos existem no CSS:

  • ::after;
  • ::before;
  • ::cue;
  • ::first-letter;
  • ::first-line;
  • ::selection;
  • ::slotted;
  • ::backdrop;
  • ::placeholder;
  • ::marker;
  • ::spelling-error;
  • ::grammar-error;

Alguns com certeza mais utilizados que outros…

Se eu pudesse te dar um conselho, já que são muitos, seria para você se concentrar em: ::after, ::before, ::placeholder

Estes foram, com certeza, os que mais utilizei

Utilizando pseudo-elemento na prática

Vamos agora utilizar um pseudo-elemento na prática e ver como a construção dessa regra funciona

Primeiramente criamos um HTML simples, com um pouco de CSS

<!-- HTML -->
<div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce rhoncus ullamcorper neque sit amet pellentesque. Vestibulum eu lacinia metus. Cras velit orci, feugiat sit amet enim a, tempor lobortis metus. Duis sit amet dapibus ipsum. Integer ante felis, faucibus in ligula quis, vulputate aliquet turpis.</p>
</div>

/* CSS */
.box {
    width: 300px;
}

p {
    color: red;
}

Aqui apenas criamos uma div com a classe box  e limitamos a largura dela com CSS, além disso inserimos uma tag p dentro da div com algum texto, o resultado é este:

pseudo-elemento parte 1

Agora vou adicionar os pseudo-elementos:

/* Restante do código CSS acima */
p::first-line {
    color: blue;
    
}
p::first-letter {
    font-size: 30px;
    color: green;
}

Aqui estilizamos a primeira linha com o ::first-line e a primeira letra com o ::first-letter

Veja o resultado final:

pseudo-elemento parte 2

Conclusão

Vimos neste post que o pseudo-elemento nada mais é que uma possibilidade de estilizar algumas partes da nossa página ou até elementos já presentes

Isso tudo apenas com CSS, sem termos que criar novos elementos no HTML

O que pode deixar o código mais legível, pois não teremos que criar um monte de tag span no código 😀

E por hoje é isso, até o próximo post!

Confira também nosso curso de HTML e CSS gratuito no YouTube clicando aqui! Onde criamos um site do 0 até o resposivo 😀

0

Programador apaixonado pelo mundo das tecnologias, sempre buscando em aprender e se aprofundar em linguagens, frameworks e o que mais for necessário para executar um bom trabalho. Agora tem uma nova missão que é de passar seu conhecimento adiante para formar novos programadores e especializar mais os que já são.

Deixe um comentário

avatar
  Subscribe  
Notify of