The Drop Cap

An enlarged, floated opening letter styled with ::first-letter and no extra markup.

In 2026: ::first-letter selects the opening character, which is not an element, and floating it while enlarging it makes a drop cap. It has worked since CSS1 in 1996 and every browser honours it. The spec folds any leading punctuation into the same selection, so a quote mark before the letter is styled too.

Where it came from: ::first-letter, CSS Level 1, W3C, 1996. One of the original pseudo-elements in the first CSS spec. MDN ↗

<style>
.dropcap::first-letter {
  float: left;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 3.4em; line-height: .8;
  padding: 4px 8px 0 0; color: #a33;
  font-weight: bold;
}
</style>

<p class="dropcap">Once upon a time the first letter of a chapter was drawn large
and set into the paragraph. The ::first-letter pseudo-element does it with no
extra markup, styling a character that is not an element. It has been in CSS
since the first version.</p>