Почему не работает псевдоэлемент на картинке?

Question

[artimity]

<img class="advantages__group-img-test" src="./img/img1.jpg" alt="">

.advantages__group-img-test{
    position: relative;
    &::after{
        content: "";
        position: absolute;
        left: 50px;
        top: -40px;
        width: 100%;
        height: 100%;
        background-image: url('./../img/img9.png');
    }
}

Должно быть так:


Получается так:

Answer 1

[Виктор]

:before и :afterдобавляет контент к содержимому элемента, а у img его нет.
Решение тут одно завернуть img например в div и к нему уже применять псевдоэлементы.

Comments

[Ankhena]

Немножечко не так.
У img нет псевдо, пока отображается сама картинка.
Если картинка потеряется, то появятся псевдо.
Т.е. можно стилизовать битые картинки.

Вместо div для обертки картинок для повышения семантичности, если нужно, можно использовать теги figure в паре с figcaption

Answer 2

[Lynn «Кофеман»]

У замещаемых элементов (img, video, и ещё нескольких) не может быть псевдоэлементов ::before и ::after

https://developer.mozilla.org/ru/docs/Web/CSS/::after

Используйте обёртку.