在祖先元素上选择 ::before 元素 :hover

Question

我有一个 CSS 三角形：

.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;
}

当 :hover 应用于 .triangle 类时，我想更改 .triangle::before 的border-bottom-color 属性。是否可以用 css 做到这一点？

我认为它看起来像这样：

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

或者这个：

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

但事实并非如此。

我不想用js解决，因为文档的其余部分都是纯css。

Answer 1

你想组合选择器：

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

以上是在类triangle的元素上，当hoverd，在before伪元素上。