Creating Attractive First Lines with CSS ::first-line

css
Published on February 27, 2019

When your copy content goes long, it is a good idea to make it visually attractive. The ::first-line selector can be used in such a scenario.

The ::first-line is a CSS pesudo-element that can be used for styling the first line of an element. It can only be applied to a block-level element.

Block-level elements are always created in a newline. Its contents may extend to multiple lines, but there will always be a line-break before and after such an element. Examples include <div>, <p>, <h1> to <h6> etc.

Note that ::first-line doesn't imply the first sentence in grammatical sense (where a line is terminated with the dot character), but the first line that appears inside the element visually.

It is used as shown below :

<div class="element">This is a div</div>
.element::first-line {
    color: red;
}

One should note that all CSS properties cannot be used with this pseudo-element. The allowed CSS properties are :

  • All font-related properties — font, font-size, font-weight etc.
  • All background related properties — background-color, background-image, background-clip etc.
  • color property
  • Few text related properties are also allowed. They are line-height, word-spacing, letter-spacing, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, text-transform, text-shadow and vertical-align.

Example 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
.post-text-1::first-line {
    font-weight: 700;
}
<div class="post-text-1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Example 2

This is the first sentence in the block. This is the second one. This is the third one. This is the fourth one. This is the fifth one. This is the sixth one. This is the seventh one. This is the final one.
.post-text-2::first-line {
    font-weight: 700;
    color: #c0392b;
}
<div class="post-text-2">This is the first sentence in the block. This is the second one. This is the third one. This is the fourth one. This is the fifth one. This is the sixth one. This is the seventh one. This is the final one.</div>

Example 3

This is the first sentence in the block and line-break is applied here
to form the third example of the set.
.post-text-3::first-line {
    color: #c0392b;
    text-transform: uppercase;

    /* margin won't work here */
    margin: 0 200px 0 0;
}
<div class="post-text-3">This is the first sentence in the block and line-break is applied here<br /> to form the third example of the set.</div>

Related CSS Properties

::first-letter — can be used to style first letter of an element.

In this Tutorial