Fix hover effect?

Question

css

Good day, there is such a piece of code https://jsfiddle.net/b9m08jvg/ Is it possible to make the hover effect work only if you hover over a link in the "a" tag but not on the "ul" tag?

Answer 1

Is it possible to make the hover effect work only if you hover over a link in the "a" tag, but not on the "ul" tag?

Yes, you can. It still works not on ul, but on li. And it seems to you that on ul, because pointing to a pseudo-element is considered to be pointing to the parent too, which is logical.
If necessary, when hovering over a, then rewrite this .nav-btn .nav li:before and .nav-btn .nav li:hover:before from li to a.
In order not to work when hovering over before, set it to pointer-events: none;.