CSS - Pseudoelemento: primera letra

Descripción

El pseudo-elemento : first-letter se utiliza para agregar un efecto especial a la primera letra de un texto.

Las siguientes propiedades se aplican a este pseudoelemento:

propiedades de fuente
propiedades de color
propiedades de fondo
propiedades de margen
propiedades de relleno
propiedades fronterizas
text-decoration
vertical-align
text-transform
line-height
float
clear

Ejemplo

A continuación se muestra el ejemplo que demuestra cómo utilizar : elemento de primera letra para agregar un efecto especial a la primera letra de elementos del 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>

Esto producirá el siguiente enlace negro:

↰ Previous page