我正在寻找一种将: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";
}
发布于 2018-12-20 05:07:20
我找到了帮助回答我问题的this article。
:empty
类有一些奇怪的行为,它不会选择包含空格或回车符/换行符的元素。
例如:<div> </div>
不会被选中,但<div></div>
会被选中。
在此用例中,CSS4规范包括:blank
,它将选择带有空格的元素,而:empty
不会。
下面是一个更新后的示例:
https://stackoverflow.com/questions/53859125
复制相似问题