CSS ::first-line Pseudo Element

❮ Prev Next ❯

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:

font properties
background properties
text-decoration, text-transform, letter-spacing, word-spacing, color.

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

CSS Pseudo-Elements Level 4

Selectors Level 3

CSS Level 2

CSS Level 1

Allowable Properties

The ::first-line pseudo-element accepts only some CSS properties. Let’s see them:

All the properties that are related to font: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch, and font-family,
All the properties related to background: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment, and background-blend-mode,
Some properties used for styling text: text-shadow, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, and vertical-align,
The CSS color property,
word-spacing, line-height, letter-spacing, text-transform and text-decoration.

Specificity and Inheritance of the ::first-line Pseudo-element

The portion of a child element occuring on the first line, from the ::first-line pseudo-element inherits only the properties that are applicable to the ::first-line pseudo-element. For the rest of the properties it inherits from the non-pseudo-element parent of the ::first-line pseudo-element. For example, the ::first-letter pseudo-element is used for styling the element’s first letter. It inherits the styles applied by the ::first-line pseudo-element.

When there is a conflict between styles that are applied using the ::first-line pseudo-element and the styles applied on a paragraph, the first one always wins, even in the cases, when the paragraph has a special style rule that is set with an !important bash.

Syntax

::first-line {
  css declarations;
}

Example of the ::first-line pseudo element:

<!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>