在祖先元素:hover时选择 ::before 伪元素

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。

- Oleg Lokshyn

Answer 1

你想要组合选择器：

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

上述代码是关于具有类名为triangle的元素，当鼠标hover在before伪元素上时。

- Richard Parnaby-King