Show a placeholder for an empty list

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

Show a placeholder for an empty list