CSS：empty伪选择器与：after伪元素组合

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类具有一些奇怪的行为，并且不会选择其中带有空格或返回/换行符的元素。

例如：将不会选择<div> </div>，但会选择<div></div>。

在此用例中，CSS4规范包含:blank，它将选择带有空格的元素，而:empty则不会。

这是一个更新的示例：

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