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

Question

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";
}

kylegill · Answer 1 · 2018-12-19T21:15:20.600

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

edited Dec 19 '18 at 21:15

answered Dec 19 '18 at 21:07

kylegill

314
1
12

1

because a space has a meaning in CSS oryouwillhaveapainreadingthis ;) so this is not weird but bydesign – Temani Afif Dec 19 '18 at 21:09
a space is interpreted as a 'text node', and empty text node, you can see it in the browser inspector – Velimir Tchatchevsky Dec 19 '18 at 21:14
makes sense! Something I'm glad I'll be looking for moving forward! – kylegill Dec 19 '18 at 21:16
Here is one more input: https://stackoverflow.com/questions/13380906/hiding-an-element-that-contains-only-spaces-using-css – Iaroslav Karandashev Dec 22 '18 at 05:23

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

1 Answers1