en mi caso quiero borrar el contenido de (::before) u ocultarlo en jquery/javacript
¿Alguien puede ayudar por favor?
He intentado esto pero no funciona
$(".element").attr('data-before','');No puede apuntar directamente a ::before con jQuery o estilo en línea, solo con CSS.
Podrías agregar una clase al elemento con una regla CSS que oculta su ::before del contenido cuando tiene esa clase:
.element.hide-before::before { display: none; } $(".element").addClass("hide-before");Ejemplo en vivo:
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> Si quisiera poder controlar el contenido a través del código JavaScript, podría hacer que el contenido provenga de un atributo (como sus data-before ):
.element::before { content: attr(data-before); }Entonces podría "eliminarlo" dejándolo en blanco:
$(".element").attr("data-before", "");pero también podría cambiarlo a otra cosa proporcionando una cadena no vacía.
Ejemplo en vivo:
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>