title: Red Asterisk directly beside placeholder in input box
body: <p>I've done a bunch of googling, but I can't find an answer anywhere that works for me. </p>
  
  <p>I'm creating a form (for the first time ever) and I need a red asterisk directly next to the placeholder text in the input boxes. Embarrassingly, this is the closest I have been able to get so far: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>form {
    margin: 0 auto;
    background-color: #3d549a;
  }
  input {
    font-family: avenir;
    font-size: 17px;
    color: #ffffff;
    font-weight: 100;
    border: none;
    width: 400px;
    padding: 15px;
    border-radius: 5px;
  }
  textarea {
    height: 5em;
    resize: vertical;
    font-family: avenir;
    font-size: 17px;
    color: #ffffff;
    font-weight: 100;
    border: none;
    width: 860px;
    padding: 15px;
    border-radius: 5px;
  }
  .asterisk_input:after {
    content: " *";
    color: #e32;
    position: absolute;
    margin: 0px 0px 0px -20px;
    font-size: 17px;
    padding: 0 5px 0 0;
  }
  .buttonblue {
    padding-left: 90px;
    background-color: #31b9e9;
    font-family: avenir;
    font-size: 16px;
    width: 300px;
    height: 75px;
    color: #ffffff;
    padding: 0;
    border: none;
    border-radius: 5px;
    box-shadow: 0px 5px 1px #21a1c6;
  }
  button {
    margin-left: .5em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table width="100%" style="background-color: #3d549a" height="820px"&gt;
  
    &lt;tr height="250"&gt;
      &lt;td valign="bottom" align="center" width="100%" colspan="4"&gt;
        &lt;span style="font-family: avenir; font-size: 40px; color: #ffffff; font-weight: 500; line-height: 10px;"&gt;GET IN TOUCH&lt;span/&gt;
        &lt;hr color="#273a72" width="75" align="centre"&gt;
        &lt;span style="font-family: avenir; font-size: 15px; color: #ffffff; font-weight: 100; line-height: 10px;"&gt;1600 Pennslyvania Ave NW, Washington, DC 20500, United States of America. Tel: (202) 456-1111&lt;/span&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  
    &lt;tr&gt;
      &lt;td&gt;
        &lt;form action="/my-handling-form-page" method="post"&gt;
          &lt;p&gt;
            &lt;input type="text" id="name" placeholder="Your Name" style="font-family: avenir; font-weight:100; font-size: 17px; background-color: #273a72" /&gt;
            &lt;span class="asterisk_input"&gt;  &lt;/span&gt; 
            &lt;input type="email" id="mail" placeholder="Your Email" style="font-family: avenir; font-weight:100; font-size: 17px; background-color: #273a72" /&gt;
            &lt;span class="asterisk_input"&gt;  &lt;/span&gt; 
          &lt;/p&gt;
          &lt;p&gt;
            &lt;textarea id="msg" placeholder="Your Message" style="font-family: avenir; color: #fff; font-weight:100; font-size: 17px; background-color: #273a72"&gt;&lt;/textarea&gt;
            &lt;span class="asterisk_input"&gt;  &lt;/span&gt; 
          &lt;/p&gt;
          &lt;p&gt;
            &lt;button class="buttonblue" type="submit"&gt;SEND MESSAGE&lt;/button&gt;
          &lt;/p&gt;
        &lt;/form&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>(I'm also having trouble centreing it ;) But one problem at a time, I suppose</p>