How can I select the ::before of a sibling element with css?

I have created a checkbox using the following HTML:

<div class="chkbox">
  <input id="accept-filter" type="checkbox" class="filter-handler" checked=""> 
  <label for="accept-filter">
   ::before
   <span class="label-txt">I accept the terms</span>
  </label>
</div>

I would like to style the ::before pseudo-element, but only when the checkbox is checked.

I have done this successfully using the :has selector:

.chkbox:has(.filter-handler:checked) label::before

However this doesn't work in Firefox (it seems the :has selector isn't supported).

I was hoping there was a way to do this by using the + sibling selector, but the following doesn't seem to work (jsfiddle):

.filter-handler:checked + label::before

Is there a way to do this?

The approach you used will work. You can use the '+' selector to do this.

It works with a class name as well as a tag name as follows:

.filter-handler:checked + .filter-label::before

or

.filter-handler:checked + label::before

Find the below code

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.filter-handler:checked + .filter-label::before {
  content: 'Selected';
  display: inline-block;
  background-color: blue;
  color: '#fff';
}

<!-- language: lang-html -->

<div class="chkbox">
  <input id="accept-filter" type="checkbox" class="filter-handler" checked=""> 
  <label for="accept-filter" class="filter-label">
   <span class="label-txt">I accept the terms</span>
  </label>
</div>

<!-- end snippet -->