<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.css

External JavaScript

This Pen doesn't use any external JavaScript resources.