Почему свойство transition не действует на псевдоэлемент after?

Question

[Meeeeeeeeeeepo]

Почему свойство transition не действует на псевдоэлемент after?

Песочница.

Answer 1

[WapSter]

Ну потому-что данный элемент ты создаешь только при hover, а транзишн изменяет состояние уже существующего. И еще некоторые свойства, не наследуются псевдоэлементами, нужно явно указывать.

Answer 2

[fallus]

Лучше объявить ::after до события :hover

Тут я дал ему эти свойства:

opacity: 0;
pointer-events: none;
transition: all 0.6s ease;

На на :hover я его показываю:

opacity: 1;
pointer-events: auto

spoiler

.container {
	max-width: 700px;
	margin: 0 auto;
}
.header__video {
	position: relative;
	border: 1px solid transparent;
	transition: all 0.6s ease 0s;
	cursor: pointer;
	border-radius: 5px;
	.header__video_img {
		border-radius: 5px;
	}
	&::before {
		content: '';
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		background-color: #fff;
		opacity: 0.9;
		border-radius: 5px;
	}
  &::after {
			content: '';
			position: absolute;
      background-color: red;
			z-index: 3;
			top: 0;
			left: 0;
			bottom: 0;
      opacity: 0;
      pointer-events: none;
      transition: all 0.6s ease;
			right: 0;
			background: url('https://i.postimg.cc/4N82j19c/icon-play.png') center / auto no-repeat;
		}
	&:hover {
		border: 1px solid #000;
		&::after {
			opacity: 1;
      pointer-events: auto
		}
	}
}