CSS - Pseudo-element - ::first-line



The ::first-line pseudo-element is used to apply special effects or styles to the first line of a block-level element. This pseudo-element has no effect on inline elements. It only works on block-level elements.

The extent of text that will be affected by the pseudo-element ::first-line depends on factors such as width of the viewport, length of line, font-size, letter-spacing, word-spacing, etc.

Only a small list of CSS properties can be used with ::first-line pseudo- element, which listed as below:

Syntax

selector::first-line {
   /* ... */
}

CSS ::first-line Example

Here is an example to show a simple usage of ::first-line pseudo-element:

<html>
<head>
<style>
   p::first-line {
      color: black;
      font-size: 2em;
      text-decoration-color: rgb(4, 65, 65);
      text-decoration-line: line-through;
   }
</style>
</head>
<body>
   <p>First line is affected by the pseudo-element.<br />
      Second line has no effect.
   </p>
   <span>Even to an inline element there is no effect.</span>
</body>
</html>
Advertisements