CSS ::first-letter Pseudo Element

CSS `::first-letter` Pseudo-Element

The ::first-letter pseudo-element is used to style the first letter of a block-level element, such as a paragraph or heading. It is often used for drop caps or decorative text styling.

1. Syntax

selector::first-letter {
  /* CSS styles here */
}

Example:

p::first-letter {
  font-size: 2em;
  color: red;
  font-weight: bold;
}

✅ The first letter of each <p> will be larger, red, and bold.

2. Example – Drop Cap Style

<p>This is an example of using the first-letter pseudo-element.</p>

p::first-letter {
  font-size: 3em;
  float: left;
  margin-right: 5px;
  font-family: serif;
  color: darkblue;
}

✅ The first letter is enlarged and styled like a drop cap, floating beside the text.

3. Styling Properties that Work with `::first-letter`

🔹 Allowed Properties

color
font-size
font-weight
font-family
text-transform
background
float
margin
padding
border
text-shadow

❌ Not Allowed Properties

line-height
text-decoration
box-shadow

4. Example – Fancy First Letter

<p>Welcome to the world of CSS styling.</p>

p::first-letter {
  font-size: 4em;
  color: #ff4500;
  text-shadow: 2px 2px 5px gray;
}

✅ The first letter is enlarged with a stylish shadow.

5. Combining with `::first-line`

css
p::first-letter {
  font-size: 3em;
  color: crimson;
}

p::first-line {
  font-weight: bold;
}

✅ First letter gets styled, and the first line appears bold.

6. Browser Support

✅ Fully supported in Chrome, Edge, Firefox, Safari, and Opera.

7. Best Practices

✔ Use ::first-letter for drop caps or decorative headings.
✔ Combine with ::first-line for better typography control.
✔ Be mindful of unsupported properties (e.g., line-height).

Tag

Souy Soeng

CSS ::first-letter Pseudo Element