CSS ::first-letter – Ejemplo práctico

Para crear un ejemplo que utilice el pseudo-elemento ::first-letter en CSS, podemos definir un estilo que haga que la primera letra de un párrafo sea más grande, de un color diferente, o incluso utilice una fuente distinta. Este efecto es a menudo utilizado en revistas o libros para embellecer el inicio de las secciones o capítulos.

En este ejemplo, la primera letra de cada <p> será un 300% más grande que el resto del texto, se coloreará en un tono de rojo #ff6347, y se mostrará en negrita. Puedes ajustar el font-size, color, y font-weight junto con otras propiedades CSS para crear el efecto visual que prefieras.

Código del ejemplo

CSS
p::first-letter {
    font-size: 200%;
    color: #ff6347; 
    font-weight: bold;
}