<!DOCTYPE html>
<html>
<!--
 | Use the :after pseudo element to add text.
 | Also test correct cascading.
 | Both chrome m44, and Firefox 39.0 incorrectly render the aqua colored box
 | slightly smaller than the cobalt colored box, and each slightly differently.
 | On Firefox, the problem is only visible at 300% zoom or larger.
-->
<head>
  <style>
  body {
    margin: 0px;
    font-size: 24px;
  }
  div:after {
    content: '!!!';
    display: inline;
    background: #888;
  }
  div.cobaltblue {
    background: #0020C2;
    color: #fff;
  }
  div.cobaltblue:after {
    content: ' not aqua...';
    background: #0ff;
  }
  div.chocolate {
    background: #d00;
  }
  div.chocolate:after {
    content: ' with chocolate!';
    display: inline-block;
    width: 75px;
    background: #ffb;
  }
  div.notvisible {
    font-weight: bold;
    display: none;
  }
  div.notvisible:after {
    display: block;
    content: ' in the dark!';
  }
  div.nextline {
    content: 'Not me';
  }
  div.nextline:after {
    display: block;
    width: 50px;
    height: 50px;
  }
  div.noafter:after {
    display: none;
  }
  div.longline {
     display: inline;
  }
  div.longline:after {
     content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pellentesque nibh ut purus lobortis pharetra. Praesent accumsan est id sem malesuada volutpat. Etiam lobortis, augue sit amet fermentum sagittis, nisl tortor egestas libero";
     font-size: 10px;
  }
  div.longlineafter {
     display: inline;
     font-size: 10px;
  }
  </style>
</head>
<body>
<div>Boo</div>
<div class='cobaltblue'>Cobalt </div>
<div class='chocolate'>Better </div>
<div class='notvisible'>I'm hiding</div>
<div class='nextline'>One</div>
<div class='longline'>This is a long line:</div>
<div class='noafter'>The end, thank you.</div>
</body>
</html>