: () селектор работает для :: до и :: после? ⇐ Html

[Anonymous]

Я пытался применить Fack New: is селектор, чтобы упростить следующие стили:

Код: Выделить всё

button:hover .icon,
button:hover .icon::before,
button:hover .icon::after {
background-color: blue;
}
< /code>
Мой результат был следующим: < /p>
button:hover :is(.icon, .icon::before, .icon::after) {
background-color: blue;
}

К сожалению, только средняя линия становится синей, когда при колебании кнопка:

Я использую это. слишком. Разве не: предназначен для такого использования? Вот полный обморок: < /p>

Код: Выделить всё

button {
position: relative;
background: transparent;
border: none;
height: 2rem;
width: 2rem;
cursor: pointer;
}

/* Working
button:hover .icon,
button:hover .icon::before,
button:hover .icon::after {
background-color: blue;
}
*/

/* ::before and ::after not working */
button:hover :is(.icon, .icon::before, .icon::after) {
background-color: blue;
}

.icon,
.icon::before,
.icon::after {
display: block;
transform-origin: center center;
transition: 0.3s;
position: absolute;
content: "";
background-color: green;
height: 4px;
width: 2rem;
left: 0;
opacity: 1;
}

.icon::before {
top: calc(2rem / -3);
}

.icon::after {
top: calc(2rem / 3);
}

.icon {
top: calc(2rem / 2);
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/797 ... -and-after