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','');
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:
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>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:
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>