title: Placeholder Attribute with :after
body: <p>I have input fields that are required and some that aren't. I'd like to target the placeholder attribute and then use the :after pseudo class to add an asterisk to the end of the text to label the field as being required.</p>
  <p>Below I'm targeting the placeholder and after pseudo class. This works fine but I'm not able to implement with a <code>.required</code> class.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    ::-webkit-input-placeholder:after {
          content: '*';
          color: darkred;
          font-size: 1.5rem;
      }
      
      input.require &gt; ::-webkit-input-placeholder:after {
         content: '*';
         color: darkred;
         font-size: 1.5rem;
       }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;input type="text" class="require" placeholder="Last Name" id="last-name"/&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I'm a bit lost as to how I would select both the require class and <code>:after</code> pseudo class. Any help would be much appreciated.</p>
  <p>Thanks in advance for your help!</p>