Pseudo element ":after" or ":before" not rendering on angular2 app

Question

We have an angular2 web app with node and we are using webpack to bundle everything up.

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.

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?

Here is the CSS that gets rendered:

<style>

//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; }

</style>

And this is the markup:

<form _ngcontent-xtv-3="" action="" method="post" class="ng-untouched ng-pristine ng-valid">
    <input _ngcontent-xtv-3="" class="signUp-userInput" id="username" placeholder="Enter your email address" type="text">
    <input _ngcontent-xtv-3="" class="signUp-passInput" id="password" placeholder="Create a password" type="password">
    <button _ngcontent-xtv-3="" type="submit">Sign Up</button>
</form>

:before is not meant to be used on replaced elements such as form elements (inputs) and image elements. In other words it's impossible with pure CSS. What are you trying to achieve? — andy jones, Nov 23 '16 at 09:39
Oh I see! So pseudo elements can not be used in them? The idea behind is to have an icon placed at the left of the input but inside it. We can achieve that using other elements and position them absolutely but the pseudo element seemed to be the approach with less markup. — Fabio, Nov 23 '16 at 09:48

score 3 · Accepted Answer · answered Nov 23 '16 at 10:20

3

Pseudo elements work off content. input is an element that cannot have content, that is, it cannot host other elements or even text nodes. This means that you can neither use :before nor :after on input elements.

I'd suggest you wrap each input element in a label and apply your :before styles to that.

answered Nov 23 '16 at 10:20

connexo

53,704
14
91
128

Yes, that was the exact issue. At the end we just tried another approach styling a label for each element which can get a pseudo element in it. Thanks! – Fabio Nov 23 '16 at 10:52

Pseudo element ":after" or ":before" not rendering on angular2 app

1 Answers1