React - 输入上的伪元素根本没有呈现[重复]答案

【问题标题】：React - Pseudo element on Input not rendered at all [duplicate]React - 输入上的伪元素根本没有呈现[重复]
【发布时间】：2019-08-22 01:22:53
【问题描述】：

我在想为什么::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 中，但是当你选择它时，它就看不见了。

这是为什么呢？

【问题讨论】：

@pwolaq 我只是在搜索 React 相关的东西，因为我认为问题是特定于 react 的。
此外，考虑到 React 如何强制您使用结束标记编写每个 html 元素，这有点令人困惑什么是容器以及什么不是容器
这不是 100% 正确的，您可以使用简短的语法。就像 XHTML 一样。你不需要关闭标签，但你需要关闭它，就像 XHTML 一样。

标签： css reactjs pseudo-element

【解决方案1】：

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

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

【讨论】：