[Edit]

CSS - style first line of the text only

1 contributors

2 contributions

0 discussions

3 points

Created by:

Zayyan-Todd

860

In this article, we would like to show you how to style only the first line of the text using CSS.

Quick solution:

xxxxxxxxxx
 
div::first-line {
    color: blue;
}

Note:

The ::first-line CSS pseudo-element applies styles to the first line of the specified element.

Screenshot:

Styling only the first line in the text using CSS.

Practical example

Edit

In this example, we use ::first-line pseudo-element to specify the style for the first line of the div element only.

xxxxxxxxxx
 
<!doctype html>
<html>
<head>
  <style>
    
    div::first-line {
        color: blue;
    }
​
  </style>
</head>
<body>
  <div>
    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>
</body>
</html>