定位 H2::在包含 H2::之前之后

Question

如何将一些 CSS 专门应用于 h2：：之后还有一个 h2：：before？

.region-sidebar-second .block > h2::after, .region-content .block > h2:after {
content: "";
display: block;
width: 30px;
margin-bottom: 1.25rem;
margin-top: 0.75rem;
border: 0.5px solid #252525;
position: relative;
}
#block-block-51 h2::before{
padding-right: 5px;
content: "f02d";
font-family: "Font Awesome 5 Pro",sans-serif;
font-weight: 900;
}
::after_selector_for_those_h2_that_have_a_::before{
left:2rem;
}

Answer 1

你不能，至少现在不能。这将需要一个选择器来选择具有不存在的before伪元素的元素。选择器仅适用于 DOM 中可用的内容。

有一个工作草案可以使用伪类选择器:has()来实现这一点。它如下所示：

element:has(::before)::after

但是，从文档中：

在

当前的规范中：has没有被标记为实时选择器配置文件的一部分，这意味着它不能在样式表中使用;只能使用像document.querySelector()这样的函数。