reactjs - CSS :empty pseudo-selector combined with :after pseudo-element

Question

我正在寻找一种将 :content 伪元素添加到空元素的方法，并遇到了 :empty CSS 伪选择器，它看起来像会达到我正在寻找的目的。基本上，我想添加一个通用消息，如“Nothing found” :after 一个像列表这样的空元素。

无论出于何种原因，我对空元素进行样式化的尝试都没有奏效，下面是一个示例: https://codepen.io/kylegill/pen/ZVLEBg

这是标记/HTML:

<ul class="list">
</ul>
<!-- ^ Not getting selected by :empty:after  -->
<ul class="list">
  <li>This list is not empty.</li>
</ul>

还有 CSS:

.list:empty:after {
  content: "Nothing found";
}

Answer 1

我找到了 this article这有助于回答我的问题。

:empty class 有一些奇怪的行为，不会选择其中有空格或回车/换行符的元素。

例如:<div> </div>不会被选中，但是 <div></div>会的。

CSS4 规范包括 :blank在这个用例中，它将选择带有空格的元素，其中 :empty不会的。

这是一个更新的例子:

https://codepen.io/kylegill/pen/vvgYZe