我正在寻找一种将 :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";
}
最佳答案
我找到了 this article这有助于回答我的问题。
:empty
class 有一些奇怪的行为,不会选择其中有空格或回车/换行符的元素。
例如:<div> </div>
不会被选中,但是 <div></div>
会的。
CSS4 规范包括 :blank
在这个用例中,它将选择带有空格的元素,其中 :empty
不会的。
这是一个更新的例子:
关于reactjs - CSS :empty pseudo-selector combined with :after pseudo-element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53859125/