CSS의 의사 요소에 호버 효과를 적용할 수 있나요?

#button:before:hover {
    /* Hover styles for the pseudo element */
}

#button:before {
    background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;
}

#button:before:hover {
    background-color: red;
}

#element-to-hover:hover #button:before {
    /* Hover styles for the pseudo element when the other element is hovered */
}

#button {
    display: block;
    height: 25px;
    margin: 0 10px;
    padding: 10px;
    text-indent: 20px;
    width: 12%;
}

#button:before {
    background-color: blue;
    content: "";
    display: block;
    height: 25px;
    width: 25px;
}

#parent-element:hover #button:before {
    background-color: red;
}