Deixar apenas primeira letra maiúscula com CSS

38d atrás

Ion

---

0 0

A propriedade text-transform: capitalize do #CSS é usada para deixar maiúscula a primeira letra das palavras de uma frase, mas caso você queira deixar somente a primeira letra da frase em maiúsculo, podemos usar o seguinte truque.

::first-letter

O pseudo-elemento ::first-letter estiliza apenas a primeira letra, e com isso conseguimos deixar somente ela maiúscula.

No seu HTML, adicione o elemento que quer estilizar, por exemplo:

<p>hello world!</p>

Agora no CSS, adicione o seguinte código:

p::first-letter {
	text-transform: capitalize;
}

O resultado vai ser um parágrafo com apenas a primeira letra maiúscula:

Hello world!