CSS - Pseudo-elemento: prima riga

Descrizione

Lo pseudo-elemento : first-line viene utilizzato per aggiungere un effetto speciale alla prima riga di un testo.

Le seguenti proprietà si applicano a questo pseudoelemento:

  • proprietà dei caratteri
  • proprietà del colore
  • proprietà dello sfondo
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Esempio

Di seguito è riportato l'esempio che dimostra come utilizzare : elemento di prima riga per aggiungere un effetto speciale alla prima riga di elementi nel 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>

Questo produrrà il seguente link nero: