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;
    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?

Have to tried in your own CSS style sheet target the same element and override styling with !important? — dowomenfart, Feb 19 '15 at 13:50

score 11 · Accepted Answer · answered Feb 19 '15 at 13:51

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

score 7 · Answer 2 · answered Feb 19 '15 at 13:50

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 <span class="foo">, but not if they're in .header:

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

<div>
  These have the X:
  <span class="foo">span.foo 1</span>
  <span class="foo">span.foo 2</span>
  <span class="foo">span.foo 3</span>
</div>
<div class="header">
  These don't:
  <span class="foo">span.foo 4</span>
  <span class="foo">span.foo 5</span>
  <span class="foo">span.foo 6</span>
</div>

Or a later rule with the exact same specificity. – Blazemonger Feb 19 '15 at 13:50 — Blazemonger, Feb 19 '15 at 13:50

score 3 · Answer 3 · answered Feb 19 '15 at 13:50

If you are manipulating the DOM by using JavaScript, you can add a class name - for instance .remove-bar - to the element having .header in order to remove the pseudo-element (generated content):

.remove-bar {
    &::before { content: none; }
}

Also make sure that it is placed after the previous styles, or use a more specific selector if needed.

score 0 · Answer 4 · answered Oct 24 '22 at 22:13

For remove special element use this method.

<button onclick="myFunction()">Remove</button>
<div id="myList">
  <div>  Coffee            </div>
  <div id="child2" > Tea   </div>
  <div> Milk               </div>
</div>

your JavaScript :

<script>
function myFunction() {
  const list = document.getElementById("myList");
  if (list.hasChildNodes()) {
    list.removeChild(list.children[0]);
  }
}
</script>

you can combine above function with this code:

const parent = document.getElementById('myList');
const children = parent.children;
let index = -1;
for (let i = 0; i < children.length; i++) {
  if (children[i].id === 'child3') {
    index = i;
    break;
  }
}
alert(index); // ️ 2

Removing an element added by ::before pseudo selector

4 Answers4

Linked