::first-letter CSS Pseudo Element

Description

The CSS ::first-letter pseudo-element is used to apply styles to the first letter of an element. It can only be used on block-level elements, such as p, h1, div, and li elements.

To use the ::first-letter pseudo-element, simply add it to the end of your CSS selector for the element you want to style. For example, to style the first letter of all <p> elements on your page, you would use the following CSS selector:

p::first-letter {
/* Your styles here */
}

You can then use any CSS property to style the first letter of the element. For example, the following CSS code would change the color of the first letter of all <p> elements to red:
p::first-letter {
color: red;
}

Here are some examples of how to use the ::first-letter pseudo-element to style the first letter of different elements:
/* Style the first letter of all `<p>` elements on the page */
p::first-letter {
font-size: 2em;
font-weight: bold;
}

/* Style the first letter of all `<h1>` elements on the page */
h1::first-letter {
text-transform: uppercase;
color: blue;
}

/* Style the first letter of all `<li>` elements in a `<ul>` element */
ul li::first-letter {
font-style: italic;
}


The ::first-letter pseudo-element is a powerful tool for styling the first letter of elements on your web pages. It can be used to create a variety of effects, such as making the first letter larger, bolder, or a different color.

Syntax

element::first-letter { … }

Example

<p>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.,</p>
<p>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.</p>
 p { 
font-family: Arial, Helvetica, sans-serif;
font-size: 0.9em;
}
p::first-letter {
font-family: "Times New Roman", Times, serif;
font-size: 2em;
color: red;
}

Notes

In CSS3, pseudo-elements were denoted by two colons to make the syntax different from pseudo-classes. In CSS2, they are indicated by a single colon. Browsers generally understand both syntaxes.

Browser Support

The following table will show you the current browser support for the CSS ::first-letter pseudo element.

Desktop
Edge Chrome Firefox Opera Safari
121171
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
18410.11137

Last updated by CSSPortal on: 1st October 2023