Marcadores

CSS Moderno: Pseudo-elementos, Variáveis e Funções.

 Bem-vindo à série de CSS para iniciantes do Academy Code Christ.

CSS-Moderno-Pseudo-elementos-Variáveis-e-Funções-calc-clamp-min-e-max
🌍 Este site está disponível em vários idiomas.
Fique à vontade para usar o tradutor no topo da página e aprender no seu idioma.


O CSS moderno evoluiu muito além de apenas “estilizar páginas”. Hoje ele permite criar interfaces inteligentes, responsivas e dinâmicas sem depender de JavaScript.

Neste artigo você vai aprender pilares essenciais do CSS avançado:

  • O que são pseudo-elementos
  • Como usar ::before e ::after
  • Diferença entre pseudo-classes e pseudo-elementos
  • Como usar variáveis CSS
  • Como usar calc(), clamp(), min() e max()

Essas ferramentas são amplamente usadas em sites profissionais e são fundamentais para quem quer evoluir no front-end.

  • Pseudo-elementos: (::before, ::after)
  • Variáveis CSS: (Custom Properties)

  • Funções nativas: (calc, clamp, min, max)

Caso queira se aprofundar mais, temos outros conteúdos que vão te ajudar a evoluir ainda mais:


💡 O que é “CSS Avançado”

Chamamos de CSS avançado o conjunto de técnicas que amplia a flexibilidade da linguagem, permitindo:

●     Criar elementos dinâmicos sem alterar o HTML;

●     Manter consistência com variáveis (Custom Properties);

●     Calcular tamanhos, proporções e espaçamentos automaticamente;

●     Reaproveitar lógica e valores para toda a interface.

Em essência, o CSS deixa de ser apenas “estilo” e se torna um motor inteligente de design.


🧩 O que são pseudo-elementos e como usar no CSS?

Os pseudo-elementos permitem que você estilize partes específicas de um elemento ou insira conteúdo decorativo sem precisar adicionar novas linhas de código no seu HTML. Isso mantém seu código limpo e profissional.

  •   ::before 

  •   ::after

Estes são os mais poderosos. Eles criam um conteúdo "antes" ou "depois" do conteúdo do elemento principal.

  • Uso Comum: Ícones, barras decorativas, efeitos de brilho em botões e aspas estilizadas

  • Regra de Ouro: Para que eles funcionem, a propriedade content: ""; é obrigatória!


O papel do content

Para pseudo-elementos aparecerem, o uso de content é obrigatório:

CSS

::before, ::after {

  content: "";

} 

Pode ser:

●     uma string "texto extra";

●     uma imagem url('icone.png');

●     ou vazio ("") apenas para efeitos visuais.


CSS
/* Criando uma linha decorativa azul abaixo de um título */
h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background-color: #0077ff;
  margin: 10px 0;
  border-radius: 2px;
}

⚙️ Como funcionam na prática

CSS

.elemento::before {
  content: "★";
  color: gold;
}

💡 Esse código adiciona uma estrela antes do elemento sem alterar o HTML.

⚠️ Importante: o content é obrigatório


CSS

::before,
::after {
  content: "";
}

Sem o content, o pseudo-elemento simplesmente não aparece.

🎨 Exemplos práticos de uso

➜ Ícone em botão

CSS

button::after {
  content: "➔";
  margin-left: 8px;
}
➜ Linha decorativa em títulos


CSS

h2::before {
  content: "";
  display: block;
  width: 50px;
  height: 3px;
  background: #1976d2;
  margin-bottom: 10px;
}
➜ Efeito de sombra em card


CSS

.card::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(to top, rgba(0,0,0,0.2), transparent);
}

🧩 Pseudo-Classes: o comportamento dinâmico no CSS

As pseudo-classes indicam estados ou condições especiais de um elemento.
  Exemplo: quando o mouse passa por cima (:hover), quando um campo está em foco (:focus), ou quando um link foi visitado (:visited).

Elas não criam novos elementos — apenas alteram o estilo dos existentes em situações específicas.

🔸 Descrição das principais pseudo-classes mais úteis: 


:hover   →    Quando o mouse passa sobre o elemento


:active      →   Quando o elemento está sendo clicado


:focus       →     Quando o elemento (input, botão, etc.) está em foco


:visited       →      Quando um link já foi visitado


:first-child        →      Primeiro filho dentro de um contêiner


:last-child        →      Último filho dentro de um contêiner


:nth-child(n)        →        Seleciona o filho na posição n (ou padrões)


🎨 Exemplo Prático: Botão com estados diferentes:

CSS

button {

  background-color: #0077ff;

  color: white;

  border: none;

  padding: 12px 20px;

  border-radius: 8px;

  cursor: pointer;

  transition: 0.3s;

}

 

button:hover {

  background-color: #005fd4;

}

 

button:active {

  transform: scale(0.95);

}

 

button:focus {

  outline: 3px solid #00b4ff;

}

 

⚡ O botão ganha aparência clicável e profissional — brilhante no hover, com feedback visual ao clicar e foco claro.

🧠 Destaques técnicos:

●     transition → anima suavemente mudanças de propriedades;


●     cursor: pointer → indica clicabilidade;


●     transform: scale() → cria efeito de "zoom" no hover.


🔸 Exemplo: Estilizando listas com nth-child


CSS

li:nth-child(odd) {

  background-color: #f2f2f2;

}

 

li:nth-child(even) {

  background-color: #e2e8ff;

}

 

💬 Isso alterna as cores de cada linha (muito usado em tabelas e listas de preços).

Você pode usar padrões dinâmicos, como:

li:nth-child(3n) {

  color: #0077ff;

} 

👉 Afeta todo terceiro item.

🔧 Usando Pseudo-elementos para Design e Animação

Você pode usar ::before e ::after para adicionar camadas visuais, bordas animadas, sombreamentos, filtros e muito mais.

⚙️Outros pseudo-elementos úteis


Pseudo-elemento                            Descrição


::first-letter  →   Estiliza apenas a primeira letra.


::first-line  → Estiliza a primeira linha de texto.


::selection   →  Estiliza o destaque quando o usuário seleciona com o mouse.

💡 Exemplo:

p::first-letter {

  font-size: 2em;

  color: #0077cc;

  font-weight: bold;

}

 

p::selection {

  background: #0077cc;

  color: white;

}

 

🔹 Isso cria uma estética elegante e dá destaque visual na leitura.

💎 Exemplo: Botão com brilho animado

CSS

button {

  position: relative;

  overflow: hidden;

  background: #0077ff;

  color: white;

  border: none;

  padding: 12px 24px;

  border-radius: 8px;

  font-weight: 600;

  cursor: pointer;

}

 

button::before {

  content: "";

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: rgba(255,255,255,0.4);

  transform: skewX(-20deg);

  transition: left 0.4s;

}

 

button:hover::before {

  left: 200%;

}

 

💥 Resultado: ao passar o mouse, uma faixa brilhante percorre o botão, como um reflexo de luz.

💬 Combinando Pseudo-Classes + Elementos

Você pode combinar ambos para criar comportamentos super ricos.

Exemplo: Subtítulo com linha animada:


CSS

h2 {

  position: relative;

  display: inline-block;

}

 

h2::after {

  content: "";

  position: absolute;

  width: 0;

  height: 3px;

  bottom: 0;

  left: 0;

  background-color: #0077ff;

  transition: width 0.3s;

}

 

h2:hover::after {

  width: 100%;

}

 

💡 Aqui o ::after desenha uma linha que cresce sob o texto quando você passa o mouse — um efeito sublinhado animado minimalista e moderno.


🧠 O que são variáveis CSS?

Variáveis CSS (ou Custom Properties) permitem armazenar valores reutilizáveis no código.

Elas ajudam a:

  • manter consistência visual
  • facilitar manutenção
  • criar temas (claro/escuro)
  • reduzir repetição de código

⚙️ Criando variáveis

CSS

:root {
  --cor-primaria: #1976d2;
  --cor-secundaria: #42a5f5;
  --fonte-principal: 'Poppins', sans-serif;
}


🔧 Usando variáveis

CSS

body {
  color: var(--cor-primaria);
  font-family: var(--fonte-principal);
}

💡 A função var() recupera o valor da variável.

🌓 Exemplo: Tema claro e escuro


CSS

:root {
  --fundo: #ffffff;
  --texto: #111111;
}

[data-tema="escuro"] {
  --fundo: #111111;
  --texto: #ffffff;
}

body {
  background: var(--fundo);
  color: var(--texto);
}

💡 Basta mudar um atributo no HTML e todo o site muda de tema.


🧮 Funções CSS modernas

As funções CSS permitem fazer cálculos e regras diretamente no estilo.

📏 calc() cálculos automáticos

CSS

main {
  width: calc(100% - 250px);
}

💡 Muito usado em layouts com sidebar.

📱 clamp() responsividade inteligente


CSS

font-size: clamp(1rem, 2vw, 2rem);

💡 A fonte se adapta automaticamente:

  • nunca fica menor que 1rem
  • nunca passa de 2rem
  • escala conforme a tela


📐 min() e max()

CSS

width: min(90vw, 1200px);

💡 Garante que:

  • o elemento nunca ultrapasse 1200px
  • mas ocupe 90% da tela em dispositivos menores

🔥 Combinando tudo na prática

Agora vamos ver como esses conceitos funcionam juntos em um componente real.

💎 Exemplo: botão moderno com CSS avançado

CSS

:root {
  --cor-primaria: #1976d2;
  --cor-hover: #42a5f5;
  --largura: clamp(150px, 30%, 250px);
}

.btn {
  position: relative;
  width: var(--largura);
  background: var(--cor-primaria);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 30px;
  overflow: hidden;
  transition: background 0.3s ease;
}

.btn:hover {
  background: var(--cor-hover);
}


✨ Efeito de brilho com pseudo-elemento

CSS

.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: rgba(255,255,255,0.3);
  transform: skewX(-20deg);
}

.btn:hover::after {
  animation: brilho 0.7s linear;
}

@keyframes brilho {
  0% { left: -75%; }
  100% { left: 125%; }
}

💡 Resultado:

  • botão responsivo com clamp()
  • cores controladas por variáveis
  • efeito visual com pseudo-elemento
  • animação suave sem JavaScript

🎨 Funções extras úteis no CSS

🖼️ filter()

CSS

img {
  filter: grayscale(80%) brightness(1.2);
}

💡 Usado para efeitos visuais e hover de imagens.

🌈 hsl()

CSS

color: hsl(210, 80%, 40%);

💡 Facilita criação de variações de cor.


⚙️ Boas práticas profissionais

✔ Use variáveis para cores e fontes
✔ Use clamp() para responsividade moderna
✔ Use pseudo-elementos apenas para decoração
✔ Evite colocar conteúdo importante em ::before ou ::after
✔ Centralize variáveis no :root


📘 Para um melhor Aprendizado          🎯 Pratique com exercícios, desafios e projetos



🛠️ Projeto Prático : Menu Animado com Pseudo-elementos.

Vamos juntar tudo que aprendemos nesta aula num menu interativo estiloso.

📄 index.html

<!DOCTYPE html>

<html lang="pt-BR">

<head>

  <meta charset="UTF-8">

  <title>Menu Animado</title>

  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="style.css">

</head>

<body>

  <nav class="menu">

<a href="#">Início</a>

<a href="#">Serviços</a>

<a href="#">Portfólio</a>

<a href="#">Contato</a>

  </nav>

</body>

</html>

 

📄 style.css

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

 

body {

  background: linear-gradient(135deg, #89f7fe, #66a6ff);

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

  font-family: 'Poppins', sans-serif;

}

 

.menu {

  display: flex;

  gap: 40px;

}

 

.menu a {

  position: relative;

  color: white;

  text-decoration: none;

  font-size: 18px;

  padding: 6px 0;

}

 

.menu a::after {

  content: "";

  position: absolute;

  width: 0;

  height: 2px;

  bottom: 0;

  left: 0;

  background: white;

  transition: width 0.3s ease;

}

 

.menu a:hover::after {

  width: 100%;

}

 

.menu a:hover {

  color: #222;

  transition: color 0.3s;

}

 

💥 Resultado:

●     Links com linha que se anima ao passar o mouse;

●     Transição suave de cor no texto;

Menu moderno, sem precisar de JavaScript.

🎨 Técnicas Avançadas de Pseudo-elementos

Além de decorações, você pode usar pseudo-elementos para:

●     Criar formas geométricas (::before com clip-path ou border-radius);

●     Adicionar ícones via fonte ou Unicode;

●     Gerar efeitos de sombra, destaque ou gradiente extra;

●     Construir animações puramente visuais, como barras de progresso ou loading spinners.

👉Exemplo 1: Bolinhas pulsantes de carregamento:

CSS

.loader {

  display: flex;

  gap: 10px;

}

 

.loader div {

  width: 14px;

  height: 14px;

  border-radius: 50%;

  background: white;

  animation: pulse 1.4s infinite ease-in-out;

}

 

.loader div:nth-child(2) { animation-delay: 0.2s; }

.loader div:nth-child(3) { animation-delay: 0.4s; }

 

@keyframes pulse {

  0%, 80%, 100% { transform: scale(0.8); opacity: 0.6; }

  40% { transform: scale(1); opacity: 1; }

} 

💡 É leve, acessível e feito com apenas CSS!

🧱 Exemplo 2: Página Interativa com Efeitos CSS


<!DOCTYPE html>

<html lang="pt-BR">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Pseudo-classes e Interação</title>

<style>

  body {

font-family: 'Poppins', sans-serif;

background: linear-gradient(to bottom, #e6f0ff, #fff);

margin: 0;

padding: 40px;

  }

 

  h1 {

text-align: center;

color: #0077cc;

  }

 

  a {

color: #0077cc;

text-decoration: none;

font-weight: bold;

transition: 0.3s;

  }

 

  a:hover {

color: #003366;

text-decoration: underline;

  }

 

  .card {

background: white;

border-radius: 10px;

padding: 20px;

width: 280px;

margin: 20px auto;

box-shadow: 0 2px 10px rgba(0,0,0,0.1);

transition: transform 0.3s ease, box-shadow 0.3s ease;

  }

 

  .card:hover {

transform: translateY(-5px);

box-shadow: 0 5px 15px rgba(0,0,0,0.2);

  }

 

  button {

background-color: #0077cc;

border: none;

color: white;

padding: 12px 20px;

margin-top: 10px;

    border-radius: 5px;

cursor: pointer;

transition: all 0.3s ease;

  }

 

  button:hover, button:focus {

background-color: #005fa3;

transform: scale(1.05);

  }

 

  input {

display: block;

padding: 8px;

margin: 10px 0;

width: 90%;

border-radius: 5px;

border: 2px solid #ccc;

outline: none;

transition: border-color 0.3s ease;

  }

 

  input:focus {

border-color: #0077cc;

box-shadow: 0 0 8px rgba(0,119,204,0.3);

  }

 

  footer {

text-align: center;

color: #888;

margin-top: 40px;

  }

</style>

</head>

<body>

  <h1>Efeitos e Interação CSS</h1>

  <div class="card">

<p>Passe o mouse sobre este card para ver o efeito!</p>

<a href="#">Saiba mais</a>

    <button>Enviar</button>

<input type="text" placeholder="Digite seu nome...">

  </div>

  <footer>

<p>&copy; 2024 - Curso HTML e CSS do Zero ao Avançado</p>

  </footer>

</body>

</html>

 

✅ Combina :hover, :focus, transition, e box-shadow.

✅ Responsivo, moderno e totalmente acessível.


❓ Perguntas Frequentes (FAQ)

O que são pseudo-elementos no CSS?

São elementos virtuais criados com ::before e ::after 
para adicionar conteúdo visual sem alterar o HTML.

Qual a diferença entre pseudo-classes e pseudo-elementos?

Pseudo-classes representam estados (:hover, :focus), 
enquanto pseudo-elementos criam partes visuais (::before, ::after).

Para que serve o clamp() no CSS?

Serve para criar valores responsivos com limites mínimo e máximo automaticamente.

🧠 Conclusão: Por que usar estas técnicas?

Dominar CSS moderno é essencial para quem quer se tornar desenvolvedor front-end profissional. Além de deixar seu site mais bonito e interativo, essas técnicas ajudam na performance e na facilidade de manutenção do código.

  • Pseudo-elementos criam efeitos visuais sem HTML
  • Variáveis deixam o código mais organizado e escalável
  • Funções como calc e clamp tornam o layout responsivo automaticamente

Aqui no Academy Code Christ, acreditamos que a programação deve ser acessível e simples. Pratique esses conceitos no seu próximo projeto e veja a diferença!


📚 Continue aprendendo


Logo-da-Academy-Code-Chrit
Este conteúdo faz parte do Academy Code Christ, um projeto criado para ajudar jovens e iniciantes a aprender programação do zero, de forma simples e gratuita.

Se este conteúdo te ajudou, você pode apoiar o projeto
Academy Code Christ com um café ☕.

Pix: antropologiacrista@gmail.com


Marcadores:

Comentários

Postar um comentário

Postagens mais visitadas