Как применить transition-delay к ::after?

Question

[Wasya UK]

Почему данная конструкция не срабатывает?

a
  position: relative
  display: block
  &:hover
    &::after
      transition: all 2s ease-in-out
      content: ''
      display: block
      position: absolute
      left: 0
      top: 0
      width: 100%
      height: 100%
      background-color: rgba(#ffffff, 0.75)
  img
    width: 100%
    height: auto

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

Answer 1

[Александр Зачиналов]

https://codepen.io/anon/pen/GOKaOQ

Answer 2

[Егор Живагин]

Дело в том, что у вас не существует блока до наведения, потому что нет стиля content до этого. Плавно создать блок в нужном месте браузер не может.

Решение - создайте блок изначально прозрачным и с отрицательным z-index . А по наведению меняйте только эти свойства

Answer 3

[Дима Паутов]

Потому что сначала нада описать стили для псевдо элемента, а уже при ховере его анимировать

Comments

[Wasya UK]

Не срабатывает.

a
        position: relative
        display: block
        &::after
          content: ''
          display: block
          position: absolute
          left: 0
          top: 0
          width: 100%
          height: 100%
          background-color: transparent
          transition: all 2s ease-in-out
          &:hover
            background-color: rgba(#FFFFFF, 0.75)

[Дима Паутов]

Wasya UK, кто вам чушь такую сказал? https://jsfiddle.net/v8sxnkc7/

[Wasya UK]

Дима Турков, да, спасибо. Я как раз похожий пример нашел) Немного врубался