CSS: cross-browser drop caps with the :first-letter pseudo-element

  • CSS
  • Gabriele Romanato

If you want to use the :first-letter pseudo-element to create drop caps, there are a few things to keep in mind. Let's see the details.

Here's the code:

p:first-letter {
    font-size: 4em;
    font-family: Georgia, serif;
    color: #888;
    float: left;
    margin: 0 10px 0 0;
    line-height: 0.8;
    text-shadow: 1px 1px 1px #333;
}​

Two things to notice here:

  1. line-height is set to 0.8 so that the drop cap is vertically aligned with the first line of the paragraph.
  2. The bottom margin is zeroed so that the surrounding text properly wraps the drop cap.

Demo

Live demo

Back to top