Как сделать ссылку активной?

Question

[Кирилл]

https://codepen.io/Lirrr/pen/YzyBMpB

есть структура: блок > ссылка > картинка.
у блока есть before с градиентным фильтром и у всех блоков расставлен z-index для нормального отображения. Но из-за этого при наведении на изображение ссылка ".top-grid__item a" не активна. А если ей поднять z-index, то фильтр уходит назад и стилизация становится некорректной. Собственно как сделать, чтобы при наведении на карточку можно было перейти по ссылке? Заранее спасибо.

Comments

[Eduard07]

а ты дай к ссылке before

[Eduard07]

и display: block к теге a

[Eduard07]

Answer 1

[Eugene Chefranov]

.top-grid__item:hover .hover-line a:after,
.top-grid__item:focus .hover-line a:after {
	width: 100%; /*устанавливаем значение 100% чтобы ссылка подчёркивалась полностью*/
}