"after："または "：before"は、angle2アプリでレンダリングしていません

Question

ノードを持つangle2 Webアプリケーションがあり、すべてをバンドルするためにwebpackを使用しています。

問題は、プロセスのどこかで、それらの擬似要素のクラスを追加しても、DOMには表示されず、レンダリングされません。私たちのアプリは、スクリプトタグにスタイルを直接注入し、css属性を各角度成分に適用するためのIDを追加します。

私たちはかなり長い間このことに苦労していましたが、私が見ていない小さな事や、私たちのスタックのレンダリングの問題のような大きな事実になるかどうかは考えていません。皆さんは何か考えていますか？ここで

は、レンダリングされるCSSです：

<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> 

そして、これは、マークアップです：

<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> 

Answer 1

擬似要素contentをオフに働きます。 inputは、がコンテンツを持つことができない、つまり、ホスト他の要素またはテキストノードさえできない要素です。つまり、:beforeでも:afterでもinput要素には使用できません。

input要素をそれぞれlabelにラップして、:beforeスタイルを適用することをお勧めします。