У псевдо-элементов не может быть :hover, если я ничего не перепутал. Тебе нужно или переделать структуру, чтобы убрать эти ::before/::after, или что-то пошаманить на js.
However, for user-action pseudo-classes such as :hover1, if you need this effect to apply only when the user interacts with the pseudo-element itself but not the a element, then this is not possible other than through some obscure layout-dependent workaround. As implied by the text, standard CSS pseudo-elements cannot currently have pseudo-classes. In that case, you will need to apply :hover to an actual child element instead of a pseudo-element.
Я читал, а ты?
Не делать же три элемента вместо одного из-за хавера
1.1 Ты всегда останавливаешься на первой строчке гугла?
1.2 Ну я рад твоим познаниям в буржуйском. У меня к сожалению с этим не очень. А гениальные переводы от гугл-переводчика иногда сами нуждаются в переводе. (:
1.3 Написал на форум знающим людям, может быть есть какой-то обходной путь. Для этого форум и нужен. Не? input type=«file» тоже типа не стилизуется. (;
1.4 Если неинтересно помогать новичкам, можешь даже не показываться в темах, толку в таком случае от тебя всё равно ноль.
2 Это первое, что я открыл.
Однако для псевдоклассов пользовательского действия, таких как: hover, если вам нужно, чтобы этот эффект применялся только тогда, когда пользователь взаимодействует с самим псевдоэлементом, но не с элементом a, то это невозможно
Это нуждается в переводе?
Ты всегда останавливаешься на первой строчке гугла?
Если по ней прихожу в спеки, где чётко сказано «псевдоэлементы не умеют в :hover», иду городить «some obscure layout-dependent workaround».
Это первое, что я открыл.
Современный вебдев: заниматься разработкой не зная английский, нагуглить на стэковерфлоу ответ на свой вопрос, полениться прогнать через переводчик отмеченный ответ с тремя сотнями голосов «за», идти ныть на форум... профит!
А вы потом удивляетесь, что у вас браузеры ОЗУ не в себя жрут