css - 定位 h2::after 包含 h2::before

Question

如何将一些CSS专门应用于h2::after，并且还有一个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 中可用的内容。

有一个工作草案可以通过pseudo-class selector :has()来实现这一点。 。它看起来如下:

element:has(::before)::after

但是，从文档来看:

In the current specification :has is not marked as part of the live selector profile, which means it can not be used within stylesheets; only with functions like document.querySelector().