::first-letter CSS Pseudo Element

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

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

HTML

<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>

CSS

 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; 

}

Result

Editor

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.