<div class="container">
  <div class="note">
    This is a note. Using <code>::before</code>, the red "Note: " is added at the beginning, before the note text.
  </div>
  <hr>
  <p>
    The list items in the following list have an image added to them using <code>::before</code>. Note that this is just a proof of concept—styling list markers is usually done using the CSS <a href="http://tympanus.net/codrops/css_reference/list-style"><code>list-style</code></a> property.
  </p>
  <ul>
    <li>First List Item</li>
    <li>Second List Item</li>
    <li>Third List Item</li>
  </ul>
  <hr>
  <p>
    The following button has an icon inserted before its text content using <code>::before</code>.
  </p>
  <div>
    <button><span>Sign Up!</span></button>
  </div>
</div>
body {
    color: #555;
    font-size: 1.1em;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
    margin: 50px 0;
}

.container {
    margin: 40px auto;
    max-width: 700px;
    padding: 50px;
}

.note {
    color: grey;
    font-style: italic;
}

.note:before {
    content: "Note: ";
    color: red;
}

ul {
    list-style: none;
}

li:before {
    content: url(http://tympanus.net/codrops-playground/assets/images/cssref/pseudo/before/check-icon.png);
}

button {
    padding: 1em;
}

button span {
    font-size: 1.5em;
    padding-left: .5em;
}

button:before {
    content: url(http://tympanus.net/codrops-playground/assets/images/cssref/pseudo/before/right-hand.png);
}