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.