Estilizar primeira letra ou primeira linha com CSS

2a atrás

::first-letter

::first-letter é o pseudoelemento utilizado para estilizar a primeira letra de um texto. Digamos que você tenha o seguinte parágrafo:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate ultricies semper. Nunc suscipit urna sed urna congue, vel euismod nunc aliquet. Aenean non efficitur ex, nec mattis tortor. Nam porta ultricies semper. Suspendisse hendrerit nunc ac est rhoncus blandit. In eget aliquet enim. Sed malesuada neque quam, vitae porttitor nulla feugiat sit amet. Pellentesque et consequat lacus. Proin consectetur ante lorem, ullamcorper ultrices ante volutpat sed. Vestibulum ullamcorper erat id mi dictum porta. Maecenas consequat nunc at augue ultrices viverra. Aenean efficitur eleifend nibh, laoreet faucibus sapien elementum vel.</p>

Você pode estilizar apenas a primeira letra dele com o #CSS a seguir:

p::first-letter {
  color: blue;
  font-size: 2em;
}

Nesse caso, mudamos a cor e tamanho da primeira letra. Esse será o resultado:

::first-line

Agora para estilizar a primeira linha, utilizamos o pseudoelemento ::first-line

p::first-line {
  color: red;
}

No exemplo acima, mudamos a cor da primeira linha para vermelho, produzindo o resultado a seguir:

::first-letter

::first-line

Comentários (0)