📘 Aula 21 MD-2: Pseudo-elementos em CSS 📘

Introdução

Pseudo-elementos são seletores do CSS que permitem estilizar partes específicas de um elemento ou inserir conteúdo visual sem alterar o HTML.

Os principais são ::before e ::after (adicionam conteúdo antes ou depois de um elemento), ::first-letter (estiliza a primeira letra) e ::first-line (estiliza a primeira linha de um parágrafo).

Diferem das pseudo-classes, que reagem a estados do elemento, como :hover. Exemplo prático: a::before { content: '🔥'; margin-right: 5px; }

Pseudo-elementos ::before e ::after

Adicionam conteúdo antes ou depois do conteúdo real de um elemento. É obrigatório definir a propriedade content.

/* Exemplo de before e after */
.aula21-decorativo::before { content: '🔥'; margin-right: 5px; }
.aula21-decorativo::after { content: '✨'; margin-left: 5px; }
Link Decorado

💡 Observe que os emojis aparecem sem alterar o HTML.

Pseudo-elemento ::first-letter

p::first-letter {
  font-size: 2rem;
  color: darkblue;
  font-weight: bold;
}

Aqui a primeira letra é estilizada usando ::first-letter, criando destaque visual.

Pseudo-elemento ::first-line

p::first-line {
  font-variant: small-caps;
  color: rgb(32, 193, 252);
  font-weight: bold;
}

Esta é a primeira linha de um parágrafo estilizada com ::first-line.

Classificando seletores em CSS: #ID, .Class, :Pseudo-class e ::Pseudo-element

Em CSS, é fundamental entender a diferença entre tipos de seletores para aplicar estilos de forma precisa.

#ID

Seletores de ID aplicam estilo a um único elemento que possua o atributo id correspondente. Sempre precedidos de #. 

<div id="cabecalho">Meu cabeçalho</div>
    
    #cabecalho {
    background-color: rgb(0, 120, 200);
    color: white;
    padding: 10px;
    }

.Class

Seletores de classe aplicam estilo a um ou vários elementos que compartilhem a mesma classe. Sempre precedidos de .. 

<div class="card">Card 1</div>
    <div class="card">Card 2</div>
    
    .card {
    background-color: rgb(200, 220, 255);
    padding: 10px;
    border-radius: 5px;
    }

:Pseudo-class

Seletores de pseudo-classe aplicam estilo a um elemento em um estado específico ou condição, como :hover, :visited ou :first-child. 

a:hover {
    color: rgb(255, 0, 0);
    text-decoration: underline;
    }

::Pseudo-element

Seletores de pseudo-elemento aplicam estilo a uma parte específica do elemento ou adicionam conteúdo antes/depois sem alterar o HTML. Exemplo: ::before, ::after, ::first-letter, ::first-line. 

p::first-letter {
      font-size: 2rem;
      font-weight: bold;
      color: darkblue;
      }
      
      p::after {
      content: ' ✨';
      }

Resumo

#ID

Único elemento, estilo exclusivo.

.Class

Um ou vários elementos, reutilizável.

:Pseudo-class

Estado específico de um elemento.

::Pseudo-element

Parte do elemento ou conteúdo extra.

Quadro comparativo de pseudo-elementos

::before

Adiciona conteúdo antes do elemento.

::after

Adiciona conteúdo depois do elemento.

::first-letter

Estiliza apenas a primeira letra de um bloco de texto.

::first-line

Estiliza apenas a primeira linha de um bloco de texto.

Conclusão

Pseudo-elementos são recursos poderosos do CSS que permitem criar efeitos visuais sofisticados, destacar partes específicas de um elemento ou inserir conteúdo extra sem modificar o HTML.

Eles ampliam as possibilidades de design, tornando páginas mais interativas e esteticamente agradáveis, e ajudam a manter o código HTML mais limpo e sem redundâncias.

Exemplos como ::before, ::after, ::first-letter e ::first-line demonstram como pequenos detalhes podem melhorar a experiência do usuário.

Referências

MDN Web Docs - Pseudo-elements