Modificar el aspecto de la primera línea de un párrafo con CSS es una técnica sencilla que puede ayudarte a crear textos visualmente más atractivos sin necesidad de introducir etiquetas HTML adicionales.
CSS dispone del pseudoelemento ::first-line, diseñado específicamente para seleccionar la primera línea visible de determinados elementos de texto.
Gracias a esta propiedad puedes cambiar el color, tamaño, tipografía, grosor o espaciado de la primera línea de tus párrafos utilizando únicamente unas pocas líneas de código.
En este tutorial vas a aprender cómo cambiar el estilo de la primera línea de un párrafo, qué propiedades puedes utilizar y cuáles son las principales limitaciones que debes tener en cuenta.
¿Qué es el pseudoelemento ::first-line? 🎨
El pseudoelemento ::first-line de CSS permite aplicar estilos exclusivamente a la primera línea renderizada de un elemento que contiene texto.
Puedes consultar también la documentación de ::first-line en MDN Web Docs para conocer sus especificaciones técnicas.
La particularidad más interesante es que no necesitas saber qué palabras aparecerán exactamente en esa primera línea, ya que el navegador realiza la selección automáticamente.
Esto significa que la primera línea puede cambiar dependiendo del ancho de la pantalla, tamaño de la fuente o dimensiones del contenedor.
En un ordenador podrían aparecer diez palabras en la primera línea mientras que en un teléfono móvil podrían aparecer únicamente cinco.
El navegador aplicará el estilo correctamente en ambos casos porque ::first-line trabaja sobre la línea visual y no sobre una cantidad concreta de palabras.
Cómo cambiar el estilo de la primera línea de todos los párrafos 🛠️
Si quieres modificar la primera línea de todos los párrafos de tu página web, puedes utilizar un selector CSS extremadamente sencillo.
Añade este código a tu hoja de estilos:
p::first-line {
color: #e63946;
font-weight: bold;
}
Con este fragmento conseguirás que la primera línea de cada párrafo aparezca en otro color y en negrita.
Puedes cambiar los valores utilizados en el ejemplo y adaptarlos completamente al diseño de tu página web.
Cómo añadir el código CSS paso a paso 🚀
Si utilizas WordPress, normalmente puedes añadir este código desde el área destinada al CSS personalizado de tu plantilla o constructor visual.
Sigue estos pasos:
- 🔹 Accede al panel de administración de WordPress.
- 🔹 Busca el apartado destinado al CSS personalizado de tu tema o constructor.
- 🔹 Añade el selector
p::first-line. - 🔹 Introduce las propiedades CSS que quieras utilizar.
- 🔹 Guarda o publica los cambios realizados.
- 🔹 Abre una página de tu web y comprueba el resultado.
Si tu sistema utiliza caché, recuerda vaciar la caché del navegador o del plugin de optimización si los cambios no aparecen inmediatamente.
Cambiar el color de la primera línea 🌈
Una de las modificaciones más sencillas consiste en utilizar un color diferente para la primera línea del párrafo.
Puedes hacerlo con este código:
p::first-line {
color: #2271b1;
}
La propiedad color permite utilizar colores hexadecimales, RGB, HSL o nombres de colores reconocidos por CSS.
Puedes consultar diferentes formatos disponibles en la documentación sobre colores CSS de MDN.
Poner la primera línea en negrita ✏️
También puedes aumentar el peso visual de la primera línea utilizando font-weight.
Utiliza este ejemplo:
p::first-line {
font-weight: 700;
}
Un valor de 700 suele equivaler a negrita, aunque el resultado final dependerá de los pesos disponibles en la tipografía utilizada.
También puedes escribir directamente:
p::first-line {
font-weight: bold;
}
Esta técnica resulta especialmente interesante cuando quieres crear una pequeña introducción visual dentro de cada párrafo.
Cambiar el tamaño de la primera línea 🔎
Otra posibilidad es aumentar ligeramente el tamaño de la fuente de la primera línea para destacarla respecto al resto del contenido.
Puedes utilizar:
p::first-line {
font-size: 20px;
}
También puedes utilizar unidades relativas como em o rem si quieres mantener una estructura tipográfica adaptable.
Por ejemplo:
p::first-line {
font-size: 1.2em;
}
El uso de unidades relativas suele ser especialmente recomendable en diseños responsive.
Cambiar la familia tipográfica de la primera línea 🔤
El pseudoelemento también te permite utilizar una familia tipográfica diferente para la primera línea.
Un ejemplo sencillo sería:
p::first-line {
font-family: Georgia, serif;
}
Este recurso puede funcionar bien cuando quieres proporcionar un aspecto editorial o distintivo a determinados bloques de texto.
Procura no combinar demasiadas tipografías diferentes porque podrías perjudicar la coherencia visual y la legibilidad de tu página.
Cambiar varias propiedades al mismo tiempo ⚙️
No tienes que limitarte a modificar una sola característica porque puedes aplicar varias propiedades CSS simultáneamente.
Por ejemplo:
p::first-line {
color: #2c3e50;
font-weight: bold;
font-size: 1.15em;
letter-spacing: 1px;
text-transform: uppercase;
}
Con este código conseguirás una primera línea con otro color, mayor grosor, tamaño superior, separación entre letras y texto en mayúsculas.
Conviene utilizar estas combinaciones con moderación para evitar que la primera línea termine resultando demasiado llamativa frente al resto del contenido.
Aplicar el estilo solamente a algunos párrafos 🎯
Probablemente no quieras modificar todos los párrafos de tu página web y prefieras aplicar el efecto únicamente a determinados contenidos.
En ese caso puedes utilizar una clase CSS.
Por ejemplo:
.destacado::first-line {
color: #d62828;
font-weight: bold;
}
Después tendrías que asignar la clase destacado al párrafo correspondiente.
El HTML podría ser:
<p class="destacado">
Este párrafo tendrá un estilo especial únicamente en su primera línea.
</p>
Esta técnica proporciona mucho más control sobre los elementos afectados y evita modificar accidentalmente todos los textos de tu página.
Usar ::first-line dentro de un artículo de WordPress 📝
También puedes limitar el efecto únicamente al contenido principal de tus artículos utilizando una clase contenedora.
Un ejemplo habitual sería:
.entry-content p::first-line {
font-weight: bold;
}
De esta manera solamente se modificarán los párrafos situados dentro del área de contenido que utilice la clase entry-content.
Debes comprobar previamente qué clases utiliza tu plantilla porque cada tema de WordPress puede utilizar nombres diferentes.
Puedes localizar fácilmente estas clases utilizando las herramientas para desarrolladores del navegador.
Propiedades CSS compatibles con ::first-line ⚠️
Aunque ::first-line resulta muy útil, no permite utilizar absolutamente todas las propiedades disponibles en CSS.
El pseudoelemento está pensado principalmente para modificar características relacionadas con tipografía, color, fondos y espaciado del texto.
Entre las propiedades que normalmente puedes utilizar se encuentran color, font-family, font-size, font-style, font-weight, letter-spacing, word-spacing, text-decoration y text-transform.
Sin embargo, algunas propiedades relacionadas con dimensiones, posicionamiento o estructura de bloques no funcionan sobre ::first-line.
Puedes encontrar información adicional sobre pseudoelementos en la guía de pseudoelementos de MDN.
Diferencia entre ::first-line y ::first-letter 📚
CSS también incluye el pseudoelemento ::first-letter, pero no debes confundirlo con ::first-line.
Mientras que ::first-line modifica toda la primera línea, ::first-letter solamente afecta al primer carácter del elemento.
Por ejemplo:
p::first-letter {
font-size: 40px;
font-weight: bold;
}
Este código puede utilizarse para crear una letra capitular, un recurso habitual en libros, revistas y publicaciones editoriales.
Si quieres modificar toda la primera línea tendrás que utilizar ::first-line en lugar de ::first-letter.
Tabla resumen de propiedades para ::first-line 📊
| Propiedad CSS | Función | Ejemplo |
|---|---|---|
| color | Cambiar el color del texto | color: red; |
| font-size | Cambiar el tamaño | font-size: 1.2em; |
| font-weight | Modificar el grosor | font-weight: bold; |
| font-family | Cambiar la tipografía | font-family: Georgia; |
| font-style | Aplicar cursiva | font-style: italic; |
| letter-spacing | Separar las letras | letter-spacing: 1px; |
| word-spacing | Separar palabras | word-spacing: 3px; |
| text-transform | Cambiar mayúsculas y minúsculas | text-transform: uppercase; |
| text-decoration | Añadir decoración | text-decoration: underline; |
| background | Añadir un fondo | background: #eee; |
¿Por qué cambia la cantidad de texto seleccionado? 📱
Uno de los aspectos más importantes de ::first-line es que la cantidad de texto afectada no es fija.
Si reduces el ancho de la ventana del navegador, algunas palabras pasarán automáticamente a la segunda línea.
En consecuencia, esas palabras dejarán de recibir los estilos de ::first-line aunque anteriormente estuvieran dentro de la primera línea.
Este comportamiento es completamente normal y permite que el pseudoelemento funcione correctamente en ordenadores, tablets y dispositivos móviles.
Por este motivo no debes utilizar ::first-line cuando necesites aplicar un estilo a unas palabras concretas independientemente del tamaño de pantalla.
En ese caso sería mejor envolver las palabras deseadas dentro de un elemento span y asignarle una clase CSS específica.
Ejemplo completo para destacar la primera línea ✅
Si buscas un resultado elegante y relativamente discreto puedes utilizar el siguiente código:
.destacado::first-line {
color: #333333;
font-size: 1.1em;
font-weight: 700;
letter-spacing: 0.4px;
}
Este ejemplo aumenta ligeramente el tamaño y el grosor sin introducir un cambio demasiado agresivo en el diseño general del contenido.
Puedes experimentar con diferentes valores hasta encontrar una combinación que encaje con la identidad visual de tu web.
Conclusión
Cambiar el estilo de la primera línea de un párrafo con CSS es extremadamente sencillo gracias al pseudoelemento ::first-line.
Con apenas unas líneas de código puedes modificar características como el color, tamaño, grosor, tipografía o separación entre letras sin alterar tu estructura HTML.
Además, utilizando clases CSS puedes decidir exactamente qué párrafos deben mostrar este efecto y mantener intactos todos los demás.
Si trabajas habitualmente con WordPress o desarrollas páginas web, conocer pseudoelementos como ::first-line y ::first-letter puede ayudarte a conseguir diseños más cuidados utilizando muy poco código.
