⚡ Quick Fix (TL;DR)

The Culprit: Adding a real extra div just for a visual effect adds markup that has nothing to do with the actual content.

The Fix: Create a pseudo-element that can serve as an overlay, decorative layer, gradient, or other visual effect – the same underlying technique behind the adjustable-opacity background fix above.

.example::before {
  content: "";
  position: absolute;
  inset: 0;
}