Languages
[Edit]
EN

CSS - style first line of the text only

3 points
Created by:
Zayyan-Todd
560

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

Quick solution:

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.
Styling only the first line in the text using CSS.

Ā 

Practical example

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

// ONLINE-RUNNER:browser;

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

References

Native Advertising
šŸš€
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ā¤ļøšŸ’» šŸ™‚

Join