CSS - Pseudoelemento: primera línea

Descripción

El pseudo-elemento : first-line se utiliza para agregar un efecto especial a la primera línea de un texto.

Las siguientes propiedades se aplican a este pseudoelemento:

  • propiedades de fuente
  • propiedades de color
  • propiedades de fondo
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Ejemplo

A continuación se muestra el ejemplo que demuestra cómo usar : elemento de primera línea para agregar un efecto especial a la primera línea de elementos del documento.

<html>
   <head>
      <style type = "text/css">
         p:first-line { text-decoration: underline; }
         p.noline:first-line { text-decoration: none; }
      </style>
   </head>
   
   <body>
      <p class = "noline"> 
         This line would not have any underline because this belongs 
         to nline class.
      </p>
      
      <p>
         The first line of this paragraph will be underlined as defined in the 
         CSS rule above. Rest of the lines in this paragraph will remain normal. 
         This example shows how to use :first-line pseduo element to give effect 
         to the first line of any HTML element.
      </p>
   </body>
</html>

Esto producirá el siguiente enlace negro: