21.11.2024

CSS ::first-letter Não Funciona: Como Estilizar a Primeira Letra

Resposta Rápida

.elemento::first-letter {
  font-size: 200%;
  color: red;
}

O pseudo-elemento ::first-letter se aplica apenas a elementos de bloco. Certifique-se de que seu elemento seja um elemento de bloco, como <p> ou <div>. Ter elementos inline aninhados, como <span>, pode interferir no ::first-letter. Use dois dois-pontos :: para navegadores modernos, enquanto um único dois-pontos : é adequado para versões mais antigas.

Escolhendo os Elementos Certos

::first-letter só funciona se o elemento HTML alvo for de nível de bloco, como <p>, <div>, tags de cabeçalho <h1>-<h6>, <li>, etc.

/* Exemplo de uso com um elemento de bloco */
.elemento-bloco::first-letter {
  font-size: larger;
}

Não tente aplicar ::first-letter a elementos inline, como <span> ou <a>. Para que funcione, você precisará alterar a propriedade display deles para block ou inline-block.

/* Convertendo elemento inline para bloco */
.elemento-inline {
  display: block;
}

Considerando o Início do Conteúdo

::first-letter não reconhece caracteres e tags que não são letras antes da primeira letra. Evite espaços, sinais de pontuação e tags antes do pseudo-elemento.

/* Espaços antes da primeira letra - não é uma boa prática */
.elemento::first-letter {
  background-color: yellow;
}

Usando o Pseudo-elemento :before

Se você adicionou conteúdo usando :before, então ::first-letter se referirá a esse conteúdo adicionado e não ao texto do elemento.

/* Aqui a primeira "letra" será uma estrela, não texto */
.elemento:before {
  content: "★";
}

.elemento::first-letter {
  font-size: 200%;
  color: orange;
}

Entendendo Pseudo-classes

::first-letter é um pseudo-elemento, que pode ser considerado um tipo especial de pseudo-classe. Esses seletores permitem que você estile partes individuais dos elementos.

/* Por exemplo, estilizando apenas a primeira letra */
.classe-kung-fu::first-letter {
  text-transform: uppercase;
}

Visualização

Vamos supor que você queira destacar a primeira letra em uma palavra de um grande parágrafo de texto:

Texto de exemplo: "Era uma vez..."

Mas e se o destaque usando :first-letter não estiver funcionando?

| Tipo de Destaque        | Funcionalidade    |
| ----------------------- | ------------------ |
| Destaque Regular        | 🖍️                 |
| Destaque `:first-letter`| ❌                 |

E aqui está a solução: seu container de texto deve ter uma propriedade de display de bloco ou inline-block.

Regra CSS: { display: block; } ou { display: inline-block; }

Vamos tentar novamente:

| Tipo de Destaque        | Funcionalidade               |
| ----------------------- | -----------------------------|
| Destaque `:first-letter`| 🎨 (Agora funciona!)         |

Agora, quando você usa :first-letter, a primeira letra é destacada tão brilhantemente quanto você pretendia!

Equilibrando Estilo e Compatibilidade

A compatibilidade dos elementos é um aspecto importante. Escolher a abordagem errada para a estilização pode fazer com que ::first-letter não funcione. Para navegadores modernos, use ::, e para compatibilidade com versões mais antigas, use :. Preste atenção à tipografia para garantir que o estilo não interrompa a harmonia geral do design.

Explorando Fontes Confiáveis

Seja você um desenvolvedor experiente ou um iniciante interessado nos detalhes de trabalhar com ::first-letter, recomendo verificar a documentação do MDN.

Recursos Úteis

1. ::first-letter - CSS | MDN
2. ::first-letter | CSS-Tricks
3. Selector ::first-letter in CSS - W3Schools
4. Selectors Level 3 - W3C
5. CSS - Pseudo-elements - TutorialsPoint

Video

Navigation