Creating Attractive First Lines with CSS ::first-line

CSSWeb DevelopmentFront End Technology

The CSS ::first-line pseudo-element helps us style first line of an element

The following examples illustrate CSS ::first-line pseudo-element.

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
body {
   text-align: center;
   background-color: darkorchid;
}
::first-line {
   font-size: 2em;
   color: black;
   font-weight: bold;
   text-shadow: 0 -10px grey;
}
</style>
</head>
<body>
<article>
<p>Donec rutrum a erat vitae interdum. </p>
<p> Donec suscipit orci sed arcu cursus imperdiet. Duis consequat aliquet leo, quis aliquam ex vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo. Donec semper ligula ac consequat scelerisque.</p>
</article>
</body>
</html>

Output

This will produce the following result −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
article {
   text-align: center;
}
::first-line {
   box-shadow: inset 0 0 13px orchid;
}
</style>
</head>
<body>
<article>
<h2>Donec rutrum a erat vitae interdum. </h2>
<p> Donec suscipit orci sed arcu cursus imperdiet. Duis consequat aliquet leo, quis aliquam ex
vehicula in. Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo. Donec
semper ligula ac consequat scelerisque.</p>
<p>Vivamus placerat tincidunt hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Quisque semper ex eget nulla consectetur varius. Integer a dolor leo.</p>
</article>
</body>
</html>

Output

This will produce the following result −

raja
Published on 12-Mar-2021 11:28:04
Advertisements