title: Pseudo element ":after" or ":before" not rendering on angular2 app
body: <p>We have an angular2 web app with node and we are using webpack to bundle everything up. </p>
  
  <p>The problem is that somewhere in the process, even though we add classes for those pseudo elements, they do not appear in the DOM, they are not rendered. Our app will inject the styles directly in a script tag and add ids to scope the css attributes to each angular component.</p>
  
  <p>We've been struggling with this for quite a long time now and no idea if it is going to be a little thing I am not seeing or a bigger fact such as a rendering issue in our stack. Do you guys have any idea?</p>
  
  <p>Here is the CSS that gets rendered: </p>
  
  <pre><code>&lt;style&gt;
  
  //blah blah blah some other styles
  
  .signUp-userInput[_ngcontent-xtv-3]:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDEzIDE1Ij48ZyBmaWxsPSIjNTU1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxlbGxpcHNlIGN4PSI2LjUiIGN5PSIzLjUiIHJ4PSIzLjUiIHJ5PSIzLjUiLz48cGF0aCBkPSJNMTMgMTVjMC00LTMtNy02LjUtN1MwIDExIDAgMTVoMTN6Ii8+PC9nPjwvc3ZnPg==);
    background-repeat: no-repeat;
    content: '';
    display: block;
    height: 16px;
    left: 0;
    position: absolute;
    width: 16px; }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>And this is the markup:</p>
  
  <pre><code>&lt;form _ngcontent-xtv-3="" action="" method="post" class="ng-untouched ng-pristine ng-valid"&gt;
      &lt;input _ngcontent-xtv-3="" class="signUp-userInput" id="username" placeholder="Enter your email address" type="text"&gt;
      &lt;input _ngcontent-xtv-3="" class="signUp-passInput" id="password" placeholder="Create a password" type="password"&gt;
      &lt;button _ngcontent-xtv-3="" type="submit"&gt;Sign Up&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>