Removing an element added by ::before pseudo selector

Question

I have the following case: (styling is done in SASS and unnecessary stylings are omitted.)

.header {
  ...
  &::before {
    ...
    position: absolute;         


        

Answer 1

The usual way is to create a more specific rule that applies to the element(s) in question (or a later rule with the same specificity), and specify display: none to hide the pseudo in that case.

For example: Here, I want to have an X in front of , but not if they're in .header:

span.foo::before {
  content: 'X ';
}
.header span.foo::before {
  display: none;
}

  These have the X:
  span.foo 1
  span.foo 2
  span.foo 3


  These don't:
  span.foo 4
  span.foo 5
  span.foo 6