The ::first-letter pseudo-element styles the first letter of the first line in a block container, when nothing else (like an image) comes before that letter.
It is often used for drop caps. Nearby punctuation is included in the match. Prefer the double-colon form; browsers still accept legacy :first-letter.
Not deprecated. Core support is broad; some details (digraphs, SVG text) vary by browser.
Language digraphs such as Dutch IJ, and ::first-letter on SVG <text>, are incomplete in many engines. Keep drop caps simple for production.
E::first-letter { { … }Example: p::first-letter { font-size: 1.5rem; color: brown; }
::first-letterTarget a block of text, then style only the allowed properties on the opening letter.
p, div, heading, …).E::first-letter (or a more specific selector like h2 + p::first-letter).| Piece | Required? | Role |
|---|---|---|
| Block container | Yes | Holds the text whose first letter you style |
::first-letter | Yes | Selects the opening letter (and nearby punctuation) |
| Allowed properties | Yes | Font, color, background, box, float, … |
Toggle presets on the sample paragraph. Styles apply through real ::first-letter rules.
Each snippet focuses on ::first-letter. Extra styles stay minimal for study. Use Try It Yourself for a live editor.
Make the opening letter larger and bold.
<style>
p::first-letter {
font-size: 1.5rem;
font-weight: bold;
color: brown;
}
</style>
<p>Scientists exploring the bay found a rare fish.</p>p::first-letter selects the opening letter.font-size and font-weight are allowed.Float a large first letter beside the text.
<style>
p::first-letter {
float: left;
font-size: 250%;
padding: 6px 3px;
margin-right: 6px;
color: #fff;
background: #0f172a;
}
</style>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>float: left lets following lines wrap beside it.font-size creates the drop-cap look.margin-right separates the letter from the text.Leading quotes and marks join the first-letter match.
<style>
p::first-letter {
color: #dc2626;
font-size: 150%;
}
</style>
<p>"Hello," she said.</p>H share the red, larger look.ello and the following text stay default.Most surprises come from content before the letter or disallowed properties.
Font, color, background, margin, padding, border, float, and related text styles are allowed. Many layout properties are ignored.
::before can steal the letterIf ::before injects text via content, ::first-letter styles that generated text first.
A plain span usually will not apply ::first-letter until it becomes block or inline-block.
For the entire first line, use ::first-line.
Large decorative letters still need enough contrast. Avoid relying on float drop caps alone for meaning.
::first-letter is a browser CSS pseudo-element. Node.js, Deno, and Bun do not evaluate it.
Core drop-cap styling is widely supported (Chrome 1+, Firefox 1+, Safari 1+, Edge 12+, IE 9+). Digraphs and SVG text support remain incomplete.
Bottom line: Safe for everyday drop caps. Treat digraphs and SVG text as progressive enhancement. It is not a JavaScript runtime API.
::first-letter (pseudo-element).float: left.One line: ::first-letter styles the opening letter of a block for emphasis or drop caps.
Style the first line of a block with the ::first-line pseudo-element.
8 people found this page helpful