CSS ::first-letter Selector

Definition

The ::first-letter selector is used to add a style to the first letter of the specified selector.

::first-letter is a pseudo element which allows you to style the first letter in an element, without needing to stick a <span > tag around that first letter in your HTML. While no tags are added to the DOM, it is as if the targeted first letter were encompassed in a <firstletter > tag. You can style that first letter as you would a real element with:

The following properties can be used with ::first-letter:

  • font properties
  • color properties 
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (only if float is 'none')
  • text-transform
  • line-height
  • float
  • clear

Example -