<main>
  <h2>Fancy Drop Cap Alternatives with CSS</h2>

  <article class="post1">
  <p>Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship.</p>
  </article>
  <hr>
  <article class="post2">
<p>I stuffed a shirt or two into my old carpet-bag, tucked it under my arm, and started for Cape Horn and the Pacific. Quitting the good city of old Manhatto, I duly arrived in New Bedford. It was a Saturday night in December. Much was I disappointed upon learning that the little packet for Nantucket had already sailed, and that no way of reaching that place would offer, till the following Monday.</p>
  </article>

</main>
.post1 p:first-child:first-letter {
  font-size: 6em;
  padding-right: .1em;
  font-family: Dancing Script, serif;
  line-height: .8;
  color: firebrick;
  vertical-align: bottom;
}

.post2 p:first-child:first-letter {
  float: left;
  font-size: 6em;
  margin-left: -.5em;
  padding-right: .1em;
  font-family: Calistoga, serif;
  line-height: .8;
  color: firebrick;
}

body {
  font-family: Calibri, Helvetica, Arial, sans-serif;
  font-size: 20px;
  padding: 0 20px;
}

main {
  text-align: center;
  margin: 0 auto;
  max-width: 580px;
}

p {
  text-align: left;
  padding: 0 20px;
}

code {
  color: firebrick;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.