The CSS reference

":first-line" - css pseudo-element (v. css 1)

  • Will add a style to the first line of a text.
  • HTML usage: all elements
  • Note: that the length of the first line depends on a number of factors, including the width of the page, the font size, etc.
  • You can, of course, control the length of the first line with a <br> tag.
  • Browsers that support the :first-line - pseudo-element :
    Internet Explorer Mozilla Firefox Opera Google Chrome Apple Safari
    Browser deviation:
    • To work in IE, a DOCTYPE must be declared.

Pseudo-element ":first-line" example:

<!DOCTYPE HTML >
<html>
  <head>
    <title>Page title</title>
    <style type="text/css">
      p#onlythis:first-line {
        color:red;
      }
    </style>
  </head>
  <body>
    <div>
      <p id='onlythis'>This first line will be red <br>
        and this line black.<br>
      </p>
    <p><b>Note:</b> For :first-line to work in
      IE, a DOCTYPE must be declared.</p>
  </body>
</html>
© 2010 by Finnesand Data. All rights reserved.
This site aims to provide FREE programming training and technics.
Finnesand Data as site owner gives no warranty for the correctness in the pages or source codes.
The risk of using this web-site pages or any program codes from this website is entirely at the individual user.