I love WordPress projects that require ditching plugins for the smallest details. Client brief: add a custom on-brand icon to each nav item that swaps on hover. Simple enough in theory. In practice? Sure, there's a plugin for that. But why bloat the site when a few lines of CSS can do the job? The challenge: Elementor's nav widget owns the ::before pseudo-element internally. Every approach kept breaking: • ::before hijacked by Elementor's styles — rendering a broken image box with a red background • ::after collapsed entirely due to Elementor injecting padding-right: 0px • !important declarations losing to Elementor's scoped widget styles • Tablet nav runs on a separate DOM structure (.elementor-nav-menu--dropdown) — desktop CSS didn't carry over • Submenu items under .elementor-sub-item needed their own selectors The fix: ditch pseudo-elements entirely. Use the anchor tag's own background-image property instead. No conflicts, no interference. One consolidated CSS block. Zero JavaScript. Clean icon swap across every breakpoint. That's the job.

Great work 👏