CSS ::first-line Pseudo-element
Applies styles to the first line of a block-level element. Note that the length of the first line depends on many factors, including the width of the element, the width of the document, and the font size of the text. Note that only a few properties are applied for first-line pseudo-element like font properties, color properties, background properties, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, clear, etc.
Example: This example uses ::first-line selector to style the first line of paragraph.
<!DOCTYPE html>
<html lang="en">
<head>
<title>first-line Demo</title>
<style>
body {
background-color: whitesmoke;
color: green;
font-size: large;
text-align: center;
}
p::first-line {
color: Red;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>::first-line element</h2>
<p>
This is a paragraph using first-line
pseudo-element to style first line of
the paragraph. Content in the first
line turns red and becomes bold.
</p>
</body>
</html>
Output:
CSS Pseudo Elements
CSS Pseudo Elements lets you style a specific part of the selected elements. For Example, Styling the first letter or line of an element, and Inserting content before or after the content of an element. All of these can be done using Pseudo Elements in CSS.
Note that in contrast to pseudo-elements, pseudo-classes can be used to style an element based on its state.
Syntax:
selector::pseudo-element {
property: value;
}
There are many Pseudo Elements in CSS but the ones which are most commonly used are as follows:
Table of Content
- ::first-line Pseudo-element
- ::first-letter Pseudo-element
- ::before Pseudo-element
- ::after Pseudo-element
- ::marker Pseudo-element
- ::selection Pseudo-element
Contact Us