<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 class="bold">
    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 class="bold">
    The following button has an icon inserted before its text content using <code>::before</code>.
  </p>
  <div>
    <button><span>Sign Up!</span></button>
  </div>
  <hr>
  <p class="bold">
    The following is an external link that gets an icon added to it using <code>::after</code>. Only links that have a class <code>external</code> will get an icon.
  </p>
  <div class="element">
    Let's <a href="http://movethewebforward.org/" class="external">Move The Web Forward</a> together!
    <p>
      <a href="#">I am not an external link</a> so I don't get an icon.
    </p>
  </div>
  <hr>
  <p class="bold">
    The following simulates a print style sheet's styles and adds the value of the <code>href</code> attribute after the links.
  </p>
  <div class="print">
    <p>
      You should check out all the awesome CSS tutorials <a href="http://tympanus.net/Codrops">on Codrops</a>.
    </p>
    <p>
      You should also read more about the properties used in this example for more information about each of them. Refer to the <a href="http://tympanus.net/codrops/css_reference/">CSS Reference</a> homepage for a list of all entries.
    </p>
  </div>
</div>