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

Question

[Дмитрий Ярощук]

Не поворачивается псевдоэлменет при наведение на текст

Answer 1

[Dino Winchester]

Вот здесь:

.title:hover ~ .title::after {
    transform: rotate(180deg);
}

При наведении на элемент .title, вы пытаетесь применить трансформацию псевдоэлементу :after, используя при этом селектор следующего элемента, который работает совсем по другому.

Чтобы менять стили псевдоэлементов, при наведении на родительский элемент, используется такая комбинация:

<element>:hover::after { /* ... style */ }

То есть для решения проблемы, нужно сделать так:

.title:hover::after {
    transform: rotate(180deg);
}

Answer 2

[Sergei Nazarenko]

потому что ты используешь jsfiddle а надо codepen.