Web/CSS/ first-letter

From Get docs


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

/* Selects the first letter of a <p> */
p::first-letter {
  font-size: 130%;
}

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. (This is poorly supported by browsers; see the browser compatibility table below.)
  • A combination of the ::before pseudo-element and the content 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.

CSS3 introduced the ::first-letter notation (with two colons) to distinguish pseudo-classes from pseudo-elements. Browsers also accept :first-letter, introduced in CSS2.


Allowable properties

Only a small subset of CSS properties can be used with the ::first-letter pseudo-element:

Syntax

/* CSS3 syntax */
::first-letter

/* CSS2 syntax */
: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

<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

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

<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

p::first-letter {
  color: red;
  font-size: 150%;
}

Result

Specifications

Specification Status Comment
CSS Pseudo-Elements Level 4The definition of '::first-letter' in that specification. Working Draft Generalizes allowed properties to typesetting, text decoration, inline layout properties, opacity, and box-shadow.
CSS Text Decoration Module Level 3The definition of 'text-shadow with ::first-letter' in that specification. Candidate Recommendation Allows the use of text-shadow with ::first-letter.
Selectors Level 3The definition of '::first-letter' in that specification. Recommendation Introduction of the two-colon syntax. Definition of edge-case behavior, such as in list items or with specific languages (e.g., the Dutch digraph IJ).
CSS Level 2 (Revision 1)The definition of '::first-letter' in that specification. Recommendation No change.
CSS Level 1The definition of '::first-letter' in that specification. Recommendation Initial definition, using the one-colon syntax.

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
::first-letter

Chrome Full support 1


Full support 1


Full support 1

Alternate Name'

Alternate Name' Uses the non-standard name: :first-letter

Edge Full support 12


Full support 12


Full support 12

Alternate Name'

Alternate Name' Uses the non-standard name: :first-letter

Firefox Full support 1


Full support 1


Full support 1

Alternate Name'

Alternate Name' Uses the non-standard name: :first-letter

IE Full support 9


Full support 9


Full support 5.5

Alternate Name'

Alternate Name' Uses the non-standard name: :first-letter

Opera Full support 7


Full support 7


Full support 3.5

Alternate Name'

Alternate Name' Uses the non-standard name: :first-letter

Safari Full support 1


Full support 1


Full support 1

Alternate Name'

Alternate Name' Uses the non-standard name: :first-letter

WebView Android Full support 37


Full support 37


Full support 37

Alternate Name'

Alternate Name' Uses the non-standard name: :first-letter

Chrome Android Full support 18


Full support 18


Full support 18

Alternate Name'

Alternate Name' Uses the non-standard name: :first-letter

Firefox Android Full support 4


Full support 4


Full support 4

Alternate Name'

Alternate Name' Uses the non-standard name: :first-letter

Opera Android Full support 10.1


Full support 10.1


Full support 10.1

Alternate Name'

Alternate Name' Uses the non-standard name: :first-letter

Safari iOS Full support 1


Full support 1


Full support 1

Alternate Name'

Alternate Name' Uses the non-standard name: :first-letter

Samsung Internet Android Full support 1.0


Full support 1.0


Full support 1.0

Alternate Name'

Alternate Name' Uses the non-standard name: :first-letter

Support for the Dutch digraph IJ Chrome

No support No

Edge

No support No

Firefox No support No

Notes'

No support No

Notes'

Notes' See bug 92176.

IE

No support No

Opera

No support No

Safari

No support No

WebView Android

No support No

Chrome Android

No support No

Firefox Android No support No

Notes'

No support No

Notes'

Notes' See bug 92176.

Opera Android

No support No

Safari iOS

No support No

Samsung Internet Android

No support No

Legend

Full support  
Full support
No support  
No support
See implementation notes.'
See implementation notes.
Uses a non-standard name.'
Uses a non-standard name.


See also