This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.



Represents the first letter of an element, if it is not preceded by any other content (such as images or inline tables) on its line. The ::first-letter pseudo-element may be used for “initial caps” and "drop caps", which are common typographical effects.


::first-letter {}


The ::first-letter pseudo-element selects the first letter or digit of the first line of a block. Some languages require two letters to be capitalised (digraphs) which are currently very poorly supported by browsers.

The ::first-letter pseudo-element can be attached to block-level elements. It can be attached to inline elements if you set the corresponding display property to block.


The following CSS will create “initial caps” by doubling the size of the first letter of any paragraph.

p::first-letter {
   font-size: 200%;

View live example

The following CSS will create a drop capital spanning about two lines.

p::first-letter {
    float: left;
    font-size: 300%;

View live example


Only the following properties apply to the ::first-letter pseudo-element: background, border, color, font, font-family, font-size, font-style, font-variant, font-weight, float, line-height, margin, padding, text-decoration, text-shadow, text-transform, vertical-align (if ‘float’ is set to ‘none’), and word-spacing

Related specifications

CSS 2.1 Selectors
W3C Recommendation
CSS 3 Selectors
W3C Recommendation