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

Question

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

.title {
    font-family: "Gotham Pro Regular", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: red;
    position: relative;
    box-sizing: border-box;
    padding-right: 15px;
    transition: all ease-in 0.7s;
     max-width: 150px;
     cursor: pointer;
    width: 100%;
}
.title::after {
    content: "?";
    position: absolute;
    top: 0;
    right: 0;
    background-color: #1ED760;
}
.title:hover ~ .title::after {
    transform: rotate(180deg);
}

<div class="title">Hello</div>

Answer 1

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

.title {
    font-family: "Gotham Pro Regular", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: red;
    position: relative;
    box-sizing: border-box;
    padding-right: 15px;
    max-width: 150px;
    cursor: pointer;
    width: 100%;
}
.title::after {
    content: "?";
    position: absolute;
    top: 0;
    right: 0;
    background-color: #1ED760;
    transition: all ease-in 0.7s;
}
.title:hover::after {
    transform: rotate(180deg);
}

<div class="title">Hello</div>

БЛОГ НА HUSL

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

Ответы (1 шт):