CSS ::first-letter pseudo-element

Definition and usage

CSS ::first-letter Pseudo-elements are used to set the style of the first letter of block-level elements.

Note:The following properties can be used with ::first-letter Used together:

• All font properties
• All background properties
• All margin properties
• All padding properties
• All border properties
• color
• text-decoration
• text-shadow
• letter-spacing
• word-spacing
• text-transform
• text-decoration-color
• text-decoration-line
• text-decoration-style
• box-shadow
• vertical-align (only when float is none)
• line-height
• float

Example

Select and set the style of the first letter of each <p> element:

p::first-letter {
  font-size: 200%;
  font-weight: bold;
  color: #8A2BE2;
}

Try it yourself

CSS syntax

::first-letter {
  css declarations;
}

Technical details

Browser support

The numbers in the table specify the first browser version that fully supports this pseudo-element.

Related pages

Tutorial:CSS Pseudo-element