How to Change CSS Content with Js

Is it possible to change CSS Content with js?

You cannot modify pseudo-elements with jQuery (unless you want to add <style> tags). You can, however, change your CSS to make this easier:

content: attr(data-text);

The text will be contained within an attribute on the element:

<div data-text="This is the default text">Test</div>

Now, you can change the attribute with jQuery and the text will change:

$('h1').attr('data-text', 'This is some other text');

Demo: http://jsfiddle.net/8qNjv/

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

In CSS:

span:after {
    content: attr(data-content) ' any other text you may want';
}

If you want to prevent the 'other text' from showing up, you could combine this with seucolega's solution like this:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});

In CSS:

span.change:after {
    content: attr(data-content) ' any other text you may want';
}

How change content value of pseudo :before element by Javascript

Update (2018): as has been noted in the comments, you now can do this.

You can't modify pseudo elements through JavaScript since they are not part of the DOM. Your best bet is to define another class in your CSS with the styles you require and then add that to the element. Since that doesn't seem to be possible from your question, perhaps you need to look at using a real DOM element instead of a pseudo one.

Changing CSS content property dynamically

Try this:

HTML:

<html lang="en">
...
<div id="add_to_cart" data-content="">example</div>

CSS:

#add_to_cart:before {
    display: block;
    font-size: 35px;
    content: attr(data-content);
    padding-right: 5px;
    font-weight: 400;
    width: 71px;
    height: 71px;
    line-height: 65px;
    text-align: center;
    text-indent: 0;
    text-shadow: none;
    color: red;
}

JS:

$('#add_to_cart').attr('data-content', (document.documentElement.lang == 'en' ? "x" : "y"));

You'll see that the character before 'example' changes when lang attr of <html> is changed.

dynamically update css content using javascript

I don't have much knowledge about -webkit-text-size-adjust

However, this should work for creating a dynamic stylesheet and inserting it:

I have added code to dynamically update it as well

const form = document.getElementById('colorChooser');form.addEventListener('submit', (e) => {  e.preventDefault();  color = document.getElementById('colorInput').value;  const style = document.getElementById('colorStyle');  style.innerHTML = `#app * {    background-color: ${color};  }`;});const style = document.createElement('style');style.id = 'colorStyle';style.type = 'text/css';style.innerHTML = `#app * {  background-color: red;}`;
document.head.appendChild(style);

#app {  margin-bottom: 10px;}#inner {  width: 50px;  height: 50px;  background-color: black;}

<div id="app">  <div id="inner"></div></div><form id="colorChooser"><input id="colorInput" type="text" placeholder="red" /><input type="submit" value="Update color"/></form>

How to Change CSS Content using IF Statement in Javascript

While it's possible to dynamically change CSS, a better approach would be to just set up the initial rules properly. For example, you could toggle a class to produce a new :before content.

.switch-button:before {
    content: "OFF";
    color: #ffffff;
    ....
}
.switch-button.on:before {
    content: "ON";
}

And then just do

for (const input of document.querySelectorAll('.switch-button-checkbox')) {
  input.addEventListener('change', (e) => {
    input.parentElement.classList.toggle('on', e.checked);
  });
}

for (const input of document.querySelectorAll('.switch-button-checkbox')) {
  input.addEventListener('change', (e) => {
    input.parentElement.classList.toggle('on', e.checked);
  });
}

.switch-button:before {
  content: "OFF";
}

.switch-button.on:before {
  content: "ON";
}

<div class="switch-button">
  <input class="switch-button-checkbox" type="checkbox">
</div>

How to change css property of content:url in jquery?

Try ...

$(document).ready(function(){
    $("#arrow").click(function(){
       $("#p1").attr({style: "content:url(images/cerchioSelezionato.png)" });
       $("#p0").attr({style: "content:url(images/cerchio.png)" });
    }
}

You're changing the Style attribute, but the content attribute.

OnClick Change CSS content

Add css class "english" on body when clicking #en:

$('#en').click(function(){
    $('body').addClass('en');
});
$('#es').click(function(){
    $('body').removeClass('en');
});

and in css change it to the following:

.headerWrapper:after {
content: 'foreign text';
animation: faderText 30s cubic-bezier(.8,0,0,.8) infinite;
}

body.en .headerWrapper:after {
content: 'english text';
animation: faderTextEn 30s cubic-bezier(.8,0,0,.8) infinite;
}

@keyframes faderText {
0% {content: "¿Empresa vs Autónomo?";}
33.33% {content: "¿Qué impuestos paga mi Empresa?";}
66.66% {content: "¿Que visado necesitan mis empleados extranjeros?";}
100% {content: "¿Empresa vs Autónomo?";}
}

@keyframes faderTextEn {
0% {content: "english version";}
33.33% {content: "english version";}
66.66% {content: "english version";}
100% {content: "english version";}
}

Change css content with data-content - break line

You need to use \n instead of \A

$("#mydiv").attr("data-content","hello\nworld");

jsFiddle