Styling First-Letters with CSS ::first-letter

Styling first letter in a block of text is a good way of increasing user attention span. It can be done with the ::first-letter CSS pseudo-element, that applies styling only to the first letter of the element.

::first-letter will work only on a block-level element — these elements always have a line break before and after them. For example div, p etc.

Usage :

<p class="post">This is a paragraph</p>
.post::first-letter {
    font-weight: 700;
    color: red;
}

Only a few CSS properties can be used with ::first-letter pseudo-element. They include :

  • All font related properties
  • All background related properties
  • All margin related properties
  • All padding related properties
  • All border related properties
  • color property is also allowed for use with this pseudo-element.
  • line-height, letter-spacing, text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, text-transform, text-shadow and vertical-align

Example

The first letter of this line will be styled as defined by the pseudo-element.
.post-text::first-letter {
    font-weight: 700;
    color: #c0392b;
    font-size: 30px;
}
<div class="post-text">The first letter of this line will be styled as defined by the pseudo-element.</div>

Related CSS Properties

::first-line — can be used to style first line of an element.

Loading Comments