Um dos aspectos mais interessantes do CSS é o uso de pseudo-elementos. Neste contexto, "pseudo" significa "não real", então pseudo-elementos são elementos virtuais ou sintéticos que não correspondem diretamente a nenhum elemento HTML real. Eles permitem que você estilize partes específicas de um elemento ou insira conteúdo sem adicionar HTML extra. Para aplicar um pseudo-elemento, anexe-o ao seletor do elemento original usando dois pontos duplos (::). Observe que o seletor pode ser qualquer tipo, como um seletor de classe ou ID. Aqui está como a sintaxe básica dos pseudo-elementos se apresenta:

selector::pseudo-element {
  property: value;
}

Este duplo dois-pontos é o que distingue pseudo-elementos de pseudo-classes, que usam um único dois-pontos. Pseudo-elementos permitem que você estilize partes específicas do conteúdo de um elemento ou insira conteúdo antes ou depois dele, mas eles não podem existir de forma independente. O elemento ao qual um pseudo-elemento está anexado é chamado de seu elemento de origem. Vamos começar olhando exemplos para os pseudo-elementos ::before e ::after. Como seus nomes sugerem, ::before permite que você insira conteúdo logo antes do conteúdo do elemento enquanto ::after permite que você insira conteúdo depois dele. Aqui está um exemplo de um elemento de botão. No CSS, usaremos posicionamento absoluto e o pseudo-elemento ::before para adicionar uma estrela antes do texto Learn More do botão. Você aprenderá mais sobre posicionamento absoluto em lições futuras.

<link rel="stylesheet" href="styles.css" />
<button class="cta-button">Learn More</button>

.cta-button {
  background-color: lightseagreen;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  position: relative;
}

.cta-button::before {
  content: "⭐";
  position: absolute;
  left: 3px;
  top: 8px;
  font-size: 0.75rem;
}

A propriedade content é usada para representar o conteúdo que você deseja adicionar antes do texto do botão. Neste exemplo, estamos adicionando uma estrela. Você notará que você pode não apenas inserir conteúdo mas também estilizar ele. Aqui está um exemplo do pseudo-elemento ::after com o mesmo botão:

<link rel="stylesheet" href="styles.css" />
<button class="cta-button">Learn More</button>

.cta-button {
  background-color: orange;
  border: none;
  padding: 10px 30px;
  cursor: pointer;
  position: relative;
}

.cta-button::after {
  content: '➡️';
  position: absolute;
  right: 5px;
  bottom: 6px;
  font-size: 1.125rem;
  transition: transform 0.3s ease;
}

No pseudo-elemento ::after, a propriedade transition é usada para animar mudanças ao longo de 0,3 segundos com um efeito de easing, criando uma transformação suave e gradual em vez de uma súbita. Você aprenderá mais sobre a propriedade transition em lições futuras. Você também pode anexar uma pseudo-classe ao conteúdo que você insere em outro conteúdo com os pseudo-elementos ::before e ::after. Por exemplo, um estado de hover para o conteúdo. Aqui está um exemplo:

<link rel="stylesheet" href="styles.css" />
<button class="cta-button">Learn More</button>

.cta-button {
  background-color: orange;
  border: none;
  padding: 10px 30px;
  cursor: pointer;
  position: relative;
}

.cta-button::after {
  content: "➡️";
  position: absolute;
  right: 5px;
  bottom: 6px;
  font-size: 1.125rem;
  transition: transform 0.3s ease;
}

.cta-button:hover::after {
  transform: translateX(2px);
}

Com transform: translateX(2px) no estado hover, o conteúdo é deslocado para a direita em 2px sempre que o usuário passa o mouse sobre o botão. A propriedade transition no próprio ::after garante que o processo leve 0.3s. É isso que a propriedade transform faz – ela permite que você rotacione, distorça, escale ou translade um elemento em uma direção específica. Você aprenderá mais sobre isso em lições futuras. No próximo exemplo, vamos analisar o pseudo-elemento ::first-letter. O pseudo-elemento ::first-letter seleciona a primeira letra do conteúdo de um elemento, permitindo que você a estilize. Here's an example of some paragraph text. Se quisermos estilizar a primeira letra, podemos usar o pseudo-elemento ::first-letter assim:

<link rel="stylesheet" href="styles.css" />
<p>G.E.A.R ACADEMY lets you learn to code without having to pay.</p>

p::first-letter {
  font-size: 4rem;
}

No último exemplo, vamos analisar o pseudo-elemento ::marker, que permite selecionar o marcador, marcador de lista ou numeração dos itens da lista para estilização. O pseudo-elemento ::marker oferece uma maneira de aprimorar a identidade da marca do seu site personalizando os marcadores da lista para combinar com seu esquema de cores. Aqui está um exemplo de uma lista não ordenada e uma lista ordenada. Para alterar a cor e o tamanho do marcador do item da lista, você pode usar o pseudo-elemento ::marker assim:

<link rel="stylesheet" href="styles.css" />
<ul>
  <li>Unordered list item 1</li>
  <li>Unordered list item 2</li>
  <li>Unordered list item 3</li>
  <li>Unordered list item 4</li>
</ul>

<ol>
  <li>Ordered list item 1</li>
  <li>Ordered list item 2</li>
  <li>Ordered list item 3</li>
  <li>Ordered list item 4</li>
</ol>

li::marker {
  color: crimson;
  font-size: 1.5em;
  font-weight: bold;
}

Nesta lição, cobrimos apenas alguns pseudo-elementos. Mas há muitos outros como o ::placeholder, ::spelling-error e ::selection que eu incentivo você a explorar por conta própria.