Исправить hover эффект?

если изменяю на "а" то перестает работать ховер еффект

Олег, вероятно, потому что у вас уже висит другой ховер на a, со своими ::before и ::after. Его соответственно нужно либо переделать по другому либо перевесить в свою очередь на span или наоборот на li.

Ankhena, Да там был другой ховер который висел на "а", я его для теста закоментил и перевесил "а" на ховер который накладывал градиент, но тогда получатся что градиет стал появляться только на "li", а не на весь bg

Олег, осталось разобраться кто кому relative

Ankhena, bg relative, а вот hover absolute

Олег,

bg relative, а вот hover absolute

Что??

relative должен быть у ul (или у чего там должен появится градиент) и между ними не должно быть других relative, иначе absolute будет считаться от него.

Ankhena, кажется уже что то запутались. У меня есть div .nav-btn его bg я назначил картинку и присвоил position: relative; используя before я сделал градиент с параметрами position: absolute; и opacity: 0; внутри данного div .nav-btn находится контейнер меню со ссылками. и вот при наведении на эту ссылку нужно что бы срабатывал hover где opacity: .9; но если я задам на ссылку hover то у меня он не работает а если на li то все ок. Я попытался объяснить еще раз, может я до этого делал это не правильно(объяснял) вот ссылка https://jsfiddle.net/b9m08jvg/ может будет более понятно. Извиняюсь, что так глупо объясняю, начал обучатся пару недель назад и еще не очень владею информацией.

Олег,

кажется уже что то запутались.

я-то нет, просто очень не хотелось править ваш код, а хотелось, чтобы вы сами поняли.

https://jsfiddle.net/9hxqfbcL/
переделайте то, что было в ::before и ::after к ссылке другим способом.

Олег, разобрались?

Ankhena, Появление градиетна по наведению именно на "а", сделал, думаю как теперь как вернуть работу before и after линии над элементами меню

Олег,
Чего тут думать? Не такой большой выбор.
1. ::after у а свободен остался. Фон и бордер.
2. span внутри a
3. li и а сделать одинаковыми по размеру. Первый эффект переписать на li, второй на а.
4. Использовать js.

Не знаю, как выглядит макет, но стойкое ощущение, что оберток перебор. Если все так, как в песочнице, то 2 дива лишние.