我们如何在Angular的输入字段中使用：before或：after伪元素？

Question

我正在尝试在输入字段上使用：after CSS伪元素，但是它不起作用。我尝试了下面的代码，请建议我如何使用此伪元素

input[type=text]:after {
  content: '[after]';
  width: 22px;
  height: 22px;
  display: inline-block;
  position: absolute;
}

Search: <input type="text" name="search">

https://www.w3schools.com/code/tryit.asp?filename=FZ9FJ29FSTVU

Answer 1

更新
css ::after和::before选择器在容器和input标记内呈现，不能包含任何子元素。因此，选择器都不能与input标签或任何其他不支持子节点的标签一起使用

因此，您不能使用普通CSS来实现它。请参阅此link on stackoverflow

您使用了错误的css after selector。

这应该有效

input[type=text]::after {
  content: '[after]';
  width: 22px;
  height: 22px;
  display: inline-block;
  position: absolute;
}