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