<div class="c">
  <h2>Testing <code>::first-letter</code></h2>
  <div class='text'>
    I am sample text
  </div>
  <div class='text'>
    I'm sample text (one apostrophe)
  </div>
  <div class='text'>
    I''''''''m sample text (multiple apostrophes)
  </div>
  <div class='text'>
    I````````m sample text (backticks)
  </div>
  <div class='text'>
    I’m sample text (curly apostrophe)
  </div>
  <div class='text'>
    I-m sample text (hyphen)
  </div>
  <div class='text'>
    I"m sample text (double quotes)
  </div>
  <div class='text'>
    "I"m sample text (double quotes around letter)
  </div>
  <div class='text'>
    I?m sample text (question mark)
  </div>
  <div class='text'>
    (I)m sample text (parentheses)
  </div>
  <div class='text'>
    [I] am sample text (brackets)
  </div>
</div>

<p class="p">Original demo <a href="https://twitter.com/andrewsmatt/status/497704502167076864">by Matt Andrews.</a> This version by Louis Lazaris. <a href="http://www.sitepoint.com/12-little-known-css-facts-the-sequel" target="_blank">See article</a>.</p>

body {
  padding: 0 20px;
  line-height: 1.5;
}

.c {
  max-width: 400px;
  margin: auto;
}

.text {
  font-size: 20px;
}

.text::first-letter {
  color: blue;
  background: yellow;
}

.p {
  text-align: center;
  font-size: 14px;
  padding-top: 130px;
}