Select ::before element on ancestor :hover

Question

I have a css triangle:

.triangle {
    display: block;
    height: 95px;
    position: relative;
}

.triangle::before, .triangle::after {
    content: ' ';

    width: 0;
    height: 0;

    position: absolute;

    border-style: solid;
    border-color: transparent;
}

.triangle::before {
    border-width: 10px 50px 85px 50px;
    border-bottom-color: #F5EACB;

    z-index: 2;
}

.triangle::after {
    border-width: 10px 56px 94px 56px;
    border-bottom-color: #FFFFFF;

    left: -6px;
    top: -6px;

    z-index: 1;
}

I want to change the border-bottom-color property of .triangle::before when :hover is applied to .triangle class. Is it possible to do this with css?

I thought it looks like this:

.triangle:hover .triangle::before {
    border-bottom-color: red;
}

Or this:

.triangle:hover .triangle::first-child {
    border-bottom-color: red;
}

but it doesn't.

I don`t want to use js solution, because the rest of the document is pure css.

Answer 1

You want to combine the selectors:

.triangle:hover::before {
    border-bottom-color: red;
}

The above is on the element with class triangle, when hoverd, on the before pseudo element.