in my case i want to delete the content of (::before) or hide it in jquery/javacript

Can anyone help please ?

I have trying this but it's not working

$(".element").attr('data-before','');

CodePudding user response：

You can't directly target ::before with jQuery or inline styling, only with CSS.

You could add a class to the element with a CSS rule that hides its ::before content when it has that class:

.element.hide-before::before {
    display: none;
}

$(".element").addClass("hide-before");

Live Example:

Show code snippet

setInterval(() => {
    $(".element").toggleClass("hide-before");
}, 1000);

.element::before {
    content: "::before content";
    border: 1px solid grey;
}
.element.hide-before::before {
    display: none;
}

<div class="element"> inline content</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

If you wanted to be able to control the content via JavaScript code, you could make the content come from an attribute (Like your data-before):

.element::before {
    content: attr(data-before);
}

Then you could "remove" it by making it blank:

$(".element").attr("data-before", "");

but you could also change it to something else by providing a non-empty string.

Live Example:

Show code snippet

let counter = 0;
setInterval(() => {
      counter;
    $(".element").attr("data-before", counter === 4 ? "" : `before ${counter}`);
    if (counter === 4) {
        counter = -1;
    }
}, 1000);

.element::before {
    content: attr(data-before);
    border: 1px solid grey;
}

<div class="element" data-before="before 0"> inline</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>