En este tutorial vamos a aprender cómo cambiar los estilos de la primera letra de un texto.

Seguro muchos han visto en los periódicos que en algunos editoriales la primera letra del contenido con un estilo diferente, a veces más grande, con mayor grosor o hasta con otro color, en algunas webs de contenido ocurre lo mismo. En este tutorial aprenderemos cómo cambiar los estilos a la primera letra de un texto.

Pseudo Elemento ::first-letter

En CSS contamos con un pseudo elemento ::first-letter que nos va a permitir cambiar los estilos a la primera letra de un texto. Veamos un ejemplo, tenemos un párrafo con texto cualquiera y vamos a pesarlo al pseudo elemento el doble del tamaño.

p::first-letter{
  font-size: 2rem;
}

See the Pen YyJWWj by Edwin Gonzales Melquiades (@edwinpgm) on CodePen.

Como ven la primera letra del parrafo se ve el doble del texto que lo sigue. Ahora para usar esta propiedad deben tener en cuenta algunas cosas:

Solo en elementos block

El elemento solo trabaja en elementos block. Por ejemplo cambiemos el elemento p por un span y veamos los resultados:

See the Pen bVmeeX by Edwin Gonzales Melquiades (@edwinpgm) on CodePen.

Al final no hubo ningun cambio en la primera letra del texto. Asi que mucha atención con eso.

Compatibilidad

Este pseudo elemento funciona correctamente en ie 5.5+, Chrome 1+, Firefox 1+, Safari 1+, Android todos, iOS todos. Hay que tener en cuenta que para Internet Explorer e inferiores versiones debemos usar solo :first-letter, es decir con un solo dos puntos.

Como hemos visto cambiar los estilos de la primera letra de un texto es tarea sencilla, en nuestro ejemplo solo hemos cambiado el tamaño, pero podríamos haber cambiado el color, fondo, grosor y cualquier propiedad que desearamos. Si desean aprender mas sobre HTML, pueden visitar nuestro curso de HTML y CSS. Los espero en un siguiente tutorial.