React - Input 上的伪元素根本没有呈现

Question

我一直在思考为什么 ::after 元素在输入元素上时根本不呈现，但在某些 div 上它呈现得很好。

我正在尝试在输入元素上制作一种性能友好的焦点效果，因此当它处于焦点位置时，它会从后面的元素中获得漂亮的光芒。

这是我的

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 中但是当你 select 它就看不见了。

这是为什么？

Answer 1

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

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

React - Input 上的伪元素根本没有呈现

React - Pseudo element on Input not rendered at all

css

pseudo-element

reactjs