css - 无法获取 :before element to appear on ReactiveForms input

Question

我试图在表单上显示一个 FormControl 以保存电话国家/地区代码前缀，并且我希望它始终在左侧填充区域显示一个加号。我的赌注是在输入中使用 :before 元素，但令人惊讶的是我无法让它出现在 DevTools 检查器中。当我开始注意到这个问题时，我什至绝望并试图将 :before 元素放在所有输入上 - 但无济于事。另一方面，主要输入元素的样式按预期工作。

同样适用于 :after。

所以我的问题是 - 放置 :before 或 :after 元素对任何人都有效吗？它是 ReactiveForms 的一个已知“特性”还是一个错误？

CSS

input[name="telCountryCode"]:before {
  content: '+';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
}

ts

this.form = this.fb.group({
  telCountryCode: '',
  telNumber: '',
});

Answer 1

像 :before/:after 这样的伪元素对 INPUT 标签不起作用