CSS - Pseudo-element :first-line


Advertisements


Description

The :first-line pseudo-element is used to add special effect to the first line of a text.

The following properties apply to the this pseudo- element −

  • font properties
  • color properties
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Example

Following is the example which demonstrates how to use :first-line element to add special effect to the first line of elements in the document.

Live Demo
<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>

This will produce following black link −



Advertisements