Jquery: clear content added with :before in css

Question

I have a menu, where ul li a:before{content: "sth";}
How with jquery on click change this content and then after second click put it back and so on?

Answer 1

According to MDN,

The content property can also show a attribute value of that element.

Example:

content: attr('data-value');

So, in your case, use jquery to change the attribute value instead of trying to change the content css property value. If you just change/toggle the attribute value, indirectly, the content css property value will change.

Example:

$('ul li a').click(function() {
    var self = $(this);
    var data = self.data('value');
    self.data('value', (data == "sth" ? data : "something else here"));
}

Answer 2

Simplest method is to create relevant class.

i.e.

CSS:

.content:before{
    content:"sth";
}

JS:

$("ul li a").click(function(){
    $(this).toggleClass("content");
});

See DEMO here.