By using the :empty selector, it's possible for us to show a custom placeholder.
ul:empty::after {
content: "Empty";
}If you want the placeholder to be more flexible instead of being hardcoded in CSS, it can be taken from an attribute, such as data-placeholder:
ul:empty::after {
content: attr(data-placeholder);
}The :empty selector doesn't have effect if the list contains a whitespace or an empty child node.
Demo
