CSS ::first-line Pseudo Element

The ::first-line pseudo-element puts a style on a first line in a block-level container. It does not select inline-level elements, such as images or inline-tables.

Some CSS properties can be used to style the ::first-line, they are:

The ::first-letter inherits the styles applied using ::first-line. If both elements are used, the styles specified by ::first-letter override those applied by ::first-line.

The ::first-line pseudo-element can also be used with one colon notation :first-line which is supported by all the browsers as well.

Version

CSS1

Syntax

::first-line {
css declarations;
}

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-line {
      color: #85d6de;
      text-transform: uppercase;
      }
    </style>
  </head>
  <body>
    <h2>::first-line selector example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </body>
</html>

Browser support

4.0+ 12.0+ 2.0+ 3.1+ 10.0+

Practice Your Knowledge

The following CSS properties can be used to style the ::first-line




Related articles