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

问题: I'm looking for a way to add a :content pseudo-element to an empty element and ran into the :empty CSS pseudo-selector which looks like it would serve the purpose I'm looki...

问题:

I'm looking for a way to add a :content pseudo-element to an empty element and ran into the :empty CSS pseudo-selector which looks like it would serve the purpose I'm looking for. Basically, I want to add a generic message like "Nothing found" :after an empty element like a list.

For whatever reason my attempts to style empty elements aren't working, here's an example: https://codepen.io/kylegill/pen/ZVLEBg

This is the Markup/HTML:

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

And the CSS:

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

回答1:

I found this article that helped answer my question.

The :empty class has some weird behavior and won't select elements with a space or a return/line break in them.

Ex: <div> </div> won't be selected, but <div></div> will.

The CSS4 spec includes :blank in this use case, which will select elements with whitespace, where :empty will not.

Here's an updated example:

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

  • 发表于 2018-12-25 18:10
  • 阅读 ( 189 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除