CSS - Pseudo-elemento: primeira linha

Descrição

O pseudo-elemento : first-line é usado para adicionar um efeito especial à primeira linha de um texto.

As seguintes propriedades se aplicam a este pseudoelemento -

propriedades da fonte
propriedades de cor
propriedades de fundo
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

Exemplo

A seguir está o exemplo que demonstra como usar : elemento de primeira linha para adicionar um efeito especial à primeira linha de elementos no 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>

Isso produzirá o seguinte link preto -

↰ Previous page