This page is Ready to Use

Notice: The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.

::first-letter

Summary

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.

Syntax

::first-letter {}

Usage

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.

Examples

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

Notes

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

Attributions