CSS pseudo Drop Caps

Drop caps has been used for a long time for printing media. Now, drop caps arrive to the web.

using :first-letter pseudo made easy. No need extra markup, it mean you no need to attach a class name to first letter manually. Sadly not supported on IE < 9, and work in most modern browser including IE9 or above. IE is dead, i dislike IE for a long time.

Our target is to style paragraph first letter without extra markup or class name and use CSS only. Try this

p:first-letter {
  font-size: 400%;
  color: #903;
  float: left;
  font-family: 'Times';
  line-height: 1;
  padding: 0 10px;
}

Code above simply tell you how to make a drop caps. Note: Keep in mind, :first-line pseudo selector is not supported on IE8 or lower. Probably, you need a fallback with extra markup. and the cross browser way..

<p>
  <span class='dropcap'>L</span>orem ipsum...
</p>

Now style the element with dropcap class name. Now, you can use dropcap on all modern browser including IE8 or lower.

.dropcap {
  font-size: 400%;
  color: #903;
  float: left;
  font-family: 'Times';
  line-height: 1;
  padding: 0 10px;
}

Do you have a better suggestion? Tell me