<!DOCTYPE html>
<html>
<!--
 | Use the :after pseudo element to add text.
 | Also test correct cascading.
-->
<head>
  <style>
    body {
      margin: 0px;
      font-size: 18px;
    }
    p {
      margin: 0px;
      font-size: 20px;
      color: #00f;
    }
    p:after {
      content: '!!!';
      font-size: 2em;
    }
    div:after {
      content: ' when this is ignored...';
      font-size: 18px;
    }
    div:after {
      content: ' and so on...';
      color: #090;
    }
    div.chocolate {
      background-color: #cff;
      font-size: 24px;
    }
    div.chocolate:after {
      content: ' with chocolate!';
      font-weight: bold;
      color: #630;
    }
    div.thrill:after {
      content: ' for the thrill';
    }
    span:after {
      content: ' [spam] ';
    }
  </style>
</head>
<body>
  <p>Bazinga</p>
  <div>Smile</div>
  <div>Cobalt rulez!</div>
  <div class='chocolate'>Better</div>
  <div class='thrill'> live </div>
  <div class='chocolate'>Better <span>...</span></div>
  <div class='thrill'>Yes<span> be sure to </span> live </div>
  <span>Oh</span>
</body>
</html>