<div class="support-initial-letter"></div>

<p>My younger brother was in London when the Martians fell at Woking. He was a medical student working for an imminent examination, and he heard nothing of the arrival until Saturday morning. The morning papers on Saturday contained, in addition to lengthy special articles on the planet Mars, on life in the planets, and so forth, a brief and vaguely worded telegram, all the more striking for its brevity.<br><a href="https://en.wikipedia.org/wiki/The_War_of_the_Worlds">The War of the Worlds</a><br>Illustration by <a href="https://pt.wikipedia.org/wiki/Henrique_Alvim_Corrêa">Henrique Alvim Corrêa</a></p>
html {
  font: 100%/1.6 'Karla', arial, sans-serif;
  background: #fbfcfc;
  color: #4c4e4d;
}
a {
  color: #304ffe;
}
a:hover {
  text-decoration: none;
}

p {
  font-size: 1.25em;
  width: 80%;
  max-width: 35em;
  margin: 3em auto 0 auto;
}

p::first-letter {
  -webkit-initial-letter: 3 2;
  initial-letter: 3 2;

  color: #c69c6d;
  margin: 1em.5em 0 0;
  font-weight: bold;
  background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/martian.jpg');
  background-size: cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

External CSS

  1. https://codepen.io/tutsplus/pen/d4c251bca68cf66cf9212d508dcedf7d

External JavaScript

This Pen doesn't use any external JavaScript resources.