React-输入上的伪元素根本不呈现

Question

在这里，我为为什么::after元素在输入元素上时根本不呈现而在某些div上呈现得很好而在此大吃一惊。

我试图在输入元素上实现性能友好的焦点效果，因此当它处于焦点位置时，它会从after元素中获得良好的发光效果。

这就是我所拥有的

return (
  <div className="App">
    <input placeholder="Username"></input>
    <div className="divider"></div>
  </div>
)

和CSS

input,
.divider {
  width: 300px;
  height: 40px;
  position: relative;
}

input::after,
.divider::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 16px 3px #61DAFB;
}

这是最终产品

检查div的:: after元素时，它就在屏幕上，如果我删除了它的尺寸，则会发生此事件，但是对于输入元素，它在DOM中，但是当您选择它时，它就不在眼前。

那是为什么？

Answer 1

:before和:after在容器内渲染，不能包含其他元素。

请查看规格：https://www.w3.org/TR/CSS2/generate.html#before-after-content