← #33 Create an autocomplete list with the datalist element
#34

Show a placeholder for an empty list

Topics: CSS

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

    Fix a typo or suggest an improvement
    #35 Conditional logging in the Console