Removing an element added by ::before pseudo selector

css, html, javascript, jquery

Solution

Only CSS can remove pseudo element, so you need to have an other class that `display:none;` the before. First declare that class in the CSS :

.header {
  ...
  &::before {
    ...
    position: absolute;
    height: 0.5rem;
    ...
  }

  &.no-before::before{
    display:none;
  }
}

Then, when you want to remove it :

$('.header').addClass('no-before'); //Remove before
$('.header').removeClass('no-before'); //Re-add before

Problem

I have the following case: (styling is done in SASS and unnecessary stylings are omitted.) ``` .header { ... &::before { ... position: absolute; height: 0.5rem; ... } } ``` This creates a bar on top of the application's menu bar. In certain cases this bar has to be removed. I have read questions like these, but with no success. What would be the best way to remove this bar added by the ::before selector?

Original source

Related problems