Question

我们有一个带有节点的angular2 web应用程序，我们正在使用webpack捆绑所有内容。

问题是在这个过程的某个地方，即使我们为这些伪元素添加类，它们也不会出现在DOM中，它们也不会被渲染。我们的应用程序将直接在脚本标记中注入样式，并添加id以将css属性范围限定为每个角度组件。

我们在很长一段时间内一直在努力解决这个问题，并且不知道它是否会成为我没有看到的小事或更大的事实，例如我们的堆栈中的渲染问题。你们有什么想法吗？

以下是渲染的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个样式应用到该元素中。

伪元素＆＃34;：＆＃34;或＆＃34;：之前＆＃34;不在angular2 app上渲染

1 个答案: