CSS first line selector

In this article, we will see What is CSS first line selector. The first-line selector is one of the pseudo-element selectors. It is used to select the first line of the element.

Example:

p::first-line
{
text-transform:uppercase;
}

It transforms and displays all characters of the first line of any p element in upper case (capital letter).

Example Code

<html>
<head>
</head>
<style type="text/css">
P::first-line {
color:red; }
*{
width: 77%;
}

</style>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. </p>
<p>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.</p>
<p>Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</body>
</html>

Output:

Steps:

In the above code, we have created three <p> tags with some text.
To select first line of the element, we can use the “::first-line” pseudo-element selector.
Here, we select “p::first-line”, it selects every first line of the paragraph tag and we set color to red.
See the above output, every first line of the given paragraph text is displayed as red color.