title: Trying to add asterisk to required input fields
body: <p>I don' think I quite understand <code>:before</code> and <code>:after</code> since I'm not able to get this working. I'm simply trying to add an asterisk after required fields in a form.</p>
  
  <p>My code is simple:</p>
  
  <pre><code>&lt;input id="name" type="text" required="required" autofocus="" placeholder="Name" autocomplete="off" value="" maxlength="40" class="required" name="name" /&gt;
  
  /* Required field */
  .required:after {
    content: '*';
    color: #EF5F5F;
  }
  </code></pre>
  
  <p>Why is this not working?<br>
  My fiddle here: <a href="http://jsfiddle.net/3EFTN/" rel="nofollow">http://jsfiddle.net/3EFTN/</a> </p>