Как реализовать overlay в CSS без изменения HTML и применения избыточного JS?

Оффтоп javascript
1

Нужно добавить полупрозрачный слой с рамкой исключительно с помощью CSS, не модифицируя существующую разметку.

Пример:

.overlay-custom {
  position: relative;
}
.overlay-custom::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 200, 0, 0.25);
  border: 1px dashed red;
  pointer-events: none;
}
2

Мне нравится способ с псевдоэлементами – позволяет держать код чистым. Я экспериментировал с ::after, и результат был интересным. А какие нюансы у вас при позиционировании overlay получались? Какие решения помогли сделать его более гибким?

3

Иногда я использую именно этот способ, и он оказывается довольно гибким. добавление overlay через псевдоэлемент ::before позволяет без лишнего JavaScript добиться нужного визуального эффекта. Для меня важно, что можно настроить прозрачность и рамку под любые задачи, даже если дизайн сложный. Единственный нюанс – внимательно прописывать позиционирование, чтобы все элементы корректно отображались, иногда случаются маленькие ошиьки, но в целом подход сработал отлично.

4

В своей практике часто использую псевдоэлемент ::before для реализации overlay, чтобы не трогать HTML. У меня основные сложности бывают с z-index и управлением позиционированием, особенно на адаптивных устройствах. Хорошо помогает настройка размеров и прозрачности, чтобы overlay не перекрывал элементы при взаимодействии. Плюс, чуточку tweaking стилей под дизайн всегда в тему.