CSS - Pseudo-elemento: primeira letra

Descrição

O pseudo-elemento : first-letter é usado para adicionar um efeito especial à primeira letra de um texto.

As seguintes propriedades se aplicam a este pseudoelemento -

propriedades da fonte
propriedades de cor
propriedades de fundo
propriedades de margem
propriedades de preenchimento
propriedades de fronteira
text-decoration
vertical-align
text-transform
line-height
float
clear

Exemplo

A seguir está o exemplo que demonstra como usar : elemento de primeira letra para adicionar um efeito especial à primeira letra de elementos no documento.

<html>
   <head>
      <style type = "text/css">
         p:first-letter { font-size: 3em; }
         p.normal:first-letter { font-size: 10px; }
      </style>
   </head>
   
   <body>
      <p class = "normal"> 
         First character of this paragraph will be normal and 
         will have font size 10 px;
      </p>
   
      <p>
         The first character of this paragraph will be 5em big and in red 
         color as defined in  the CSS rule above. Rest of the characters in 
         this paragraph will remain normal. This example shows how to use 
         :first-letter pseudo element to give effect to the first
         characters of any HTML element.
      </p>
   </body>
</html>

Isso produzirá o seguinte link preto -

↰ Previous page