CSS ::first-line – Ejemplo práctico

Para aplicar estilos a la primera línea de un texto usando el pseudo-elemento ::first-line en CSS, puedes modificar la apariencia de esta línea para que se destaque del resto del texto. Esto puede ser útil para captar la atención del lector al principio de un párrafo o sección.

En este ejemplo, la primera línea de cada <p> se estilizará para que sea un 150% más grande que el tamaño de fuente base, se coloreará en un tono de verde #32CD32, y se mostrará en negrita. Al igual que con ::first-letter, puedes ajustar el font-size, color, font-weight, y otras propiedades CSS para lograr el efecto deseado.

El uso de ::first-line es particularmente efectivo para introducciones de secciones, párrafos destacados, o cualquier lugar donde quieras enfatizar el comienzo del texto.

Código del ejemplo

HTML

 p::first-line {
font-size: 120%;
color: #bf0310; 
font-weight: bold;
}