::first-letter
::first-letter matches the first letter (or punctuation before the first letter) of a block element. It is perfect for magazine-style drop caps.
CSS
Intermediate
4 min read
::first-letter Drop Cap
Example
/* Classic drop cap */
article p:first-of-type::first-letter {
font-size: 3.5em;
line-height: 0.8;
float: left;
margin-right: 0.1em;
font-family: Georgia, serif;
color: #007bff;
} Pro Tip
::first-letter only works on block-level elements — set display: block on inline elements first.