CSS ::first-letter Pseudo-element
Applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables). Note that only a few properties are applied for first-letter 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-letter selector to style the first letter of paragraph.
<!DOCTYPE html>
<html lang="en">
<head>
<title>first-letter Demo</title>
<style>
body {
background-color: whitesmoke;
color: green;
font-size: large;
text-align: center;
}
p::first-letter {
color: Red;
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Geeks For Geeks</h1>
<h2>::first-letter element</h2>
<p>
This is a paragraph using first-letter
pseudo-element to style first letter
of the paragraph. first-letter element
turned the first letter of this paragraph
to red and made it 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