::first-letter
The ::first-letter
CSS 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).
Try it
The first letter of an element is not always trivial to identify:
- Punctuation that precedes or immediately follows the first letter is included in the match. Punctuation includes any Unicode character defined in the open (Ps), close (Pe), initial quote (Pi), final quote (Pf), and other punctuation (Po) classes.
- Some languages have digraphs that are always capitalized together, like the
IJ
in Dutch. In these cases, both letters of the digraph should be matched by the::first-letter
pseudo-element. - A combination of the
::before
pseudo-element and thecontent
property may inject some text at the beginning of the element. In that case,::first-letter
will match the first letter of this generated content.
Note: CSS introduced the ::first-letter
notation (with two colons) to distinguish pseudo-classes from pseudo-elements. For backward compatibility, browsers also accept :first-letter
, introduced earlier.
Browser support for digraphs such as IJ
in Dutch is poor. Check the compatibility table below to see the current state of support.
Allowable properties
Only a small subset of CSS properties can be used with the ::first-letter
pseudo-element:
- All font properties:
font
,font-style
,font-feature-settings
,font-kerning
,font-language-override
,font-stretch
,font-synthesis
,font-variant
,font-variant-alternates
,font-variant-caps
,font-variant-east-asian
,font-variant-ligatures
,font-variant-numeric
,font-variant-position
,font-weight
,font-size
,font-size-adjust
,line-height
andfont-family
- All background properties:
background
,background-color
,background-image
,background-clip
,background-origin
,background-position
,background-repeat
,background-size
,background-attachment
, andbackground-blend-mode
- All margin properties:
margin
,margin-top
,margin-right
,margin-bottom
,margin-left
- All padding properties:
padding
,padding-top
,padding-right
,padding-bottom
,padding-left
- All border properties: the shorthands
border
,border-style
,border-color
,border-width
,border-radius
,border-image
, and the longhands properties - The
color
property - The
text-decoration
,text-shadow
,text-transform
,letter-spacing
,word-spacing
(when appropriate),line-height
,text-decoration-color
,text-decoration-line
,text-decoration-style
,box-shadow
,float
,vertical-align
(only iffloat
isnone
) CSS properties
Syntax
css
::first-letter {
/* ... */
}
Examples
Simple drop cap
In this example we will use the ::first-letter
pseudo-element to create a simple drop cap effect on the first letter of the paragraph coming right after the <h2>
.
HTML
html
<h2>My heading</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est.
</p>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat.
</p>
CSS
css
p {
width: 500px;
line-height: 1.5;
}
h2 + p::first-letter {
color: white;
background-color: black;
border-radius: 2px;
box-shadow: 3px 3px 0 red;
font-size: 250%;
padding: 6px 3px;
margin-right: 6px;
float: left;
}
Result
Effect on special punctuation and non-Latin characters
This example illustrates the effect of ::first-letter
on special punctuation and non-Latin characters.
HTML
html
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat.
</p>
<p>-The beginning of a special punctuation mark.</p>
<p>_The beginning of a special punctuation mark.</p>
<p>"The beginning of a special punctuation mark.</p>
<p>'The beginning of a special punctuation mark.</p>
<p>*The beginning of a special punctuation mark.</p>
<p>#The beginning of a special punctuation mark.</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>"特殊的汉字标点符号开头。</p>
CSS
css
p::first-letter {
color: red;
font-size: 150%;
}
Result
Specifications
Specification |
---|
CSS Pseudo-Elements Module Level 4 # first-letter-pseudo |
Browser compatibility
BCD tables only load in the browser