Как предотвратить эффект :hover у родителя, когда наводим на псевдоэлемент?

Question

[Кирилл]

Есть такая вёрстка:

<div class="box">
    <a href="#">Привет!</a>
</div>

Есть такие стили:

.box:after {
    position: absolute;
    display: block;
    content: "";
    width: 100px;
    height: 50px;
    background: red;
}

a {
    display: block;
    color: green;
}

.box:hover a {
    color: red;
}

Когда я навожу курсор на ссылку a, то всё нормально, цвет ссылки меняется на красный. Но как сделать, чтобы цвет ссылки не менялся, когда я навожу на псевдоэлемент .box:after ?

Есть возможность сделать так, чтобы :hover игнорировался только в случае наведения на .box:after ?

Вот код.

Answer 1

[Jerryforce]

pointer-events:none