targeting h2::after containing a h2::before

Question

how to to apply some css specifically to the h2::after that also have a 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;
}

fphilipe · Answer 1 · 2019-12-20T09:40:44.010

You can't, at least not yet. That would require a selector which selects elements that have a before pseudo element, which doesn't exist. Selectors only work on what is available in the DOM.

There is a working draft that would enable this with the pseudo-class selector :has(). It would look as follows:

element:has(::before)::after

But, from the docs:

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().

targeting h2::after containing a h2::before

1 Answers1