CSS: после родительского элемента

Question

Можно ли получить псевдо CSS :after элемент за фоном своего родительского элемента?

Фон из :after содержит те же размеры, что и фон родительского элемента. Так что в настоящее время это выглядит так:

Но я хочу красный фон (:after) идти за родительским элементом. Итак, я добавил position: relative родителю и absolute к псевдоэлементу.

Пытаясь заархивировать это, я использовал этот код:

.btn {
  position: relative;
  display: inline-block;
  padding: .8rem 1rem;
  font-size: 1rem;
  background: #000;
}

.btn:after {
  position: absolute;
  bottom: -0.3rem; right: -0.3rem;
  z-index: -1;

  width: 100%; height: 100%;
  content:'';
  background: red;
}

<a href="" class="btn">
  This is my button
</a>

Странная вещь в том, что вышеупомянутый фрагмент работает как шарм. Но в моем живом примере точно такой же код отображается как изображение в этой теме. Кто-то знает, что не так на живом сайте?

Answer 1

На вашем сайте у вас есть следующее правило CSS:

.btn {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: .8rem 1rem;
  font-size: 1rem;
  background: #000;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

Если вы удалите z-index: 1 свойство, ваш CSS будет работать правильно. Это свойство отсутствует в приведенном выше примере фрагмента.

Я попробовал это с помощью инспектора CSS в Firefox, и это, кажется, решило проблему.

Answer 2

Вы можете разместить :after элемент позади его родителя, если вы оберните его родителя внутри другого элемента. Что происходит, так это то, что :after игнорирует позиционирование своего родителя, но применяет позиционирование к следующему родителю в иерархии.

HTML

    <div class="wrap">
        <a href="" class="btn blue">
            <span>Bekijk op facebook</span>
            <span class="fa fa-arrow-circle-right"></span>
        </a>
    </div>

CSS

.wrap{
    position:relative;
    z-index:1;
}

.btn{
    /* remove position:relative; */
}

Но решение box-shadow в тимотимском ответе было бы немного более подходящим для этого конкретного случая, не зная, как это будет соответствовать остальной части вашего сайта.

Answer 3

:before или же :after псевдоэлемент считается дочерним элементом, и из-за контекста стека элементов :after элемент не может быть отображен за своим родителем таким образом.

Тем не менее, вы можете использовать box-shadow создать прочную "границу", которая достигает желаемого эффекта. Вот пример:

.btn{
  box-shadow: red 6px 7px 0 0;
}