Проблема с градиентными рамками у элемента. Как решить?

Question

[Евгений Мягких]

Всем привет!

Вобщем, решил запилить ссылку с градиентыми границами. Запилил вот такой код в 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?? Я уже весь мозг себе сломал.

Заранее спасибо за ответ!

Comments

[Сергей delphinpro]

Псевдо-элементы вообще-то находятся внутри элемента. И по логике, в принципе, не могут провалится под свой элемент.

<element>
  <before/>
  [text content]
  <after/>
</element>

[Евгений Мягких]

Сергей delphinpro, Сергей, z-index: -1 у псевдоэлементов это решает.

Вот готовое решение: https://codepen.io/shshaw/pen/MqMZGR

Но ведь то же самое у меня - не работает

[Вадим Кот]

Так уберите z-index: 2 у .main-slider-item__link и заработает)

[Сергей delphinpro]

Евгений Мягких, эх, затупил... сотни раз так делал тенюшки под блоками...
Уберите z-index с элемента.

[Евгений Мягких]

Вадим Кот, убирал, но тогда получается вот такой результат:



Т.е. как будто псевдоэлементы вообще не отображаются

[Вадим Кот]

Евгений Мягких,
https://codepen.io/web-tech/pen/qvLmVG

[Евгений Мягких]

Вадим Кот, ну это вообще за гранью :)))

[Евгений Мягких]

Вадим Кот, Разобрался. Поскольку используется свойство z-index: -1, то псеводэлементы проваливаются под все другие родительские элементы, а не только под элемент A, которому они принадлежат. Потому, нужно было установить родительскому элементу для тэга A СSS свойства position: relative и z-index: 1