Fabio Fabio - 15 days ago 5
CSS Question

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

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">
<input _ngcontent-xtv-3="" class="signUp-passInput" id="repeatedPassword" placeholder="Please confirm password" type="password">
<button _ngcontent-xtv-3="" type="submit">Sign Up</button>
</form>

Answer

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.