Display text on an Events page when there are no upcoming events

To display custom text on an Event page when there are no upcoming events, you can use this code to Website Tools > Custom CSS.

div.events-list:has(.eventlist.eventlist--upcoming):before {
    display: none;
}
div.events-list:before {
    content: "No Events Now";
    display: block;
    font-size: 30px;
    text-align: center;
}

Result like this