А ви знаєте, що в CSS існує можливість вибрати і стилізувати порожній елемент? Я теж колись не знав. Ба більше — вважав, що це щось із майбутнього, де існує тільки CSS3. Насправді ця можливість із нами ще з часів CSS2.1 — просто якось тиха і непомітна, без гучних анонсів і трендових статей.

Цікавий факт: CSS2.1 став стандартом у 2011 році — того самого року, коли я розпочав свою карʼєру у веброзробці.

Псевдоклас :empty працює дуже просто: він вибирає елементи, у яких немає жодного вмісту — ні тексту, ні дочірніх елементів. Абсолютна порожнеча. І це справді може бути корисним: наприклад, щоб приховати порожні картки або підсвітити розмітку, яку випадково залишили пустою.

Єдине, що треба пам’ятати: навіть один пробіл, перенос рядка чи непомітний   уже робить елемент непорожнім. :empty спрацьовує тільки тоді, коли в DOM буквально нічого немає.

section:empty {
  outline: 2px dashed red;
}

section:empty::before {
  content: "Тут мало би бути щось важливе.";
  color: crimson;
}

MDN

@babichdev

Зайшло? Лайк, збереження та поширення — найкращі відповіді, чи варто продовжувати.