Teach with us

Usage of CSS :first-line pseudo-element

CSSWeb DevelopmentFront End Technology

Use this element to add special styles to the first line of the text in a selector. The following example demonstrates how to use the :first-line element to add special effects to the first line of elements in the document.

Example

Live Demo

<html>
   <head>
      <style>
         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>
raja
Samual Sam
Updated on 13-Mar-2020 13:03:22

Previous Page Print Page Next Page  
Advertisements