Всем привет!
Вобщем, решил запилить ссылку с градиентыми границами. Запилил вот такой код в STYLUS:
.main-slider-item__link
position relative
z-index 2
padding: 7px 35px;
margin: 0 0 0 35px
mix_font(18.3px, 1.2, 400)
color: #fff
background #333;
background-clip: padding-box;
border: 2px solid transparent
border-radius 50px
&::before
content: ''
position absolute
top: 0
left: 0
right: 0
bottom: 0
z-index -1
margin: -2px;
background-image linear-gradient(90deg, #d8e4ff, #ff2993);
border-radius inherit
&::after
content: ''
position absolute
top: 0
left: 0
right: 0
bottom: 0
z-index -1
margin: -2px;
background-image linear-gradient(90deg, #ff2993, #d8e4ff);
border-radius inherit
transition .3s ease-in-out
&:hover
&::after
opacity: 0
Результат получается следующий:
Почему при нахождении псевдоэлементов
::before и
::after под основным элементом
<a>, на основном не отображается заливка background?? Я уже весь мозг себе сломал.
Заранее спасибо за ответ!
Простой
