SyntaxStudy
Sign Up
CSS Intermediate 4 min read

::first-letter Drop Cap

::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.

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.