How change content value of pseudo :before element by Javascript

set pseudo-element properties with javascript
set pseudo-element properties with jquery
before pseudo element
css change before ( content)
change css of pseudo element
pseudo selector in javascript
css content image
jquery ::before selector

I have the grap constructured by CSS, which is dynamically changes by JS. I show graph max value by pseudo element as:

.graph:before {
    content:""; //value that want set by JS
    position:absolute;
    top:0;
    left:0;
}

That's why I need to set this value by JS. I tried $(".graph:before").css("content", hh); but it didn't help. How to get that value?

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 pseudo-element content using JavaScript, <span data-content="Something is happening">Something is happening</span> ! CSS. CSS. CSS Options. Format CSS; View Compiled CSS; Analyze CSS Very simply here, we are extending the HTMLElement prototype to have a new function called pseudoStyle which accepts a pseudo element (:before, :after for example) a property, and a value. We then add a new unique class to the element, which is defined in a new “pseudoStyles” stylesheet that gets injected into the head of the document.

I hope the below snippet might help, you can specify the content value you want via JS using the CSS attr() function. Below you have two options: to use JavaScript or jQuery:

jQuery:

$('.graph').on('click', function () {
    //do something with the callback
    $(this).attr('data-before','anything'); //anything is the 'content' value
});

JavaScript:

var graphElem = document.querySelector('.graph');
graphElem.addEventListener('click', function (event) {
    event.target.setAttribute('data-before', 'anything');
});

CSS:

.graph:before {
    content: attr(data-before); /* value that that refers to CSS 'content' */
    position:absolute;
    top: 0;
    left: 0;
}

Setting/Modifying :before and :after in javascript, Learn how to modify the CSS :before and :after pseudo elements of an pseudoStyle = function(element,prop,value){ var _this = this; var  This question already has an answer here: Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery 21 answers. Modify pseudo-element :after's width using javascript [duplicate] 4 answers.

You can use CSS variable

:root {
  --h: 100px;
}

.elem:after {
  top: var(--h);
}

let y = 10;

document.documentElement.style.setProperty('--h', y + 'px')

https://codepen.io/Gorbulin/pen/odVQVL

CSS Pseudo-elements, of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. A CSS pseudo-element is used to style specified parts of an element. Style the first letter, or line, of an element; Insert content before, or after, the content of an :invalid, input:invalid, Selects all <input> elements with an invalid value. To modify the color of the pseudo element - .red::before from red to green. Method 1: Write separate classes attached with psuedo element for each style and then using JavaScript or jQuery toggle between these classes.

People who are still looking some solution of same problem, it is doable as follows using jQuery:

<button id="changeBefore">Change</button>
<script>
    var newValue = '22';//coming from somewhere
    var add = '<style>.graph:before{content:"'+newValue+'"!important;}</style>';
    $('#changeBefore').click(function(){
        $('body').append(add);
    });
</script>

This example illustrate that on clicking button: changeBefore , the value for .graph:before will change as per new dynamic coming value for it.

For more description about changing of :before or :after element style or getting its content:

Lets suppose your HTML is like this:

<div id="something">Test</div>

And then you are setting its :before in CSS and designing it like:

#something:before{
   content:"1st";
   font-size:20px;
   color:red;
}
#something{
  content:'1st';
}

Please notice I also set content attribute in element itself so that you can take it out easily later. Now there is a button clicking on which, you want to change the color of :before to green and its font-size to 30px. You can achieve that as follows:

Define a css with your required style on some class .activeS :

.activeS:before{
   color:green !important;
   font-size:30px !important;
 }

Now you can change :before style by adding the class to your :before element as follows:

<button id="changeBefore">Change</button>
<script>
    $('#changeBefore').click(function(){
        $('#something').addClass('activeS');
    });
</script>

If you just want to get content of :before, it can be done as:

<button id="getContent">Get Content</button>
<script>
    $('#getContent').click(function(){
        console.log($('#something').css('content'));//will print '1st'
    });
</script>

I hope it helps

CSS Content Property, The following example inserts the value of the href attribute in parenthesis after The content property is used with the ::before and ::after pseudo-elements, JavaScript syntax: You can't give an element a pseudo-class by using JavaScript, If it is really just to switch about two fixed values, then simply add a 'rightMode' class on the element, and in css do elem.rightMode::before { left: 95%;} – Kaiido Mar 5 '18 at 8:57 I wanted to avoid modifying the original css code in the event of an update need.

I believe there is a simple solution using the attr() function to specify the content of the pseudo element. Here is a working example using the 'title' attribute, but it should work also with custom attributes.:

document.getElementById('btn_change1').addEventListener("click", function(){
    document.getElementById('test_div').title='Status 1';
});
   
document.getElementById('btn_change2').addEventListener("click", function(){       
    document.getElementById('test_div').title='Status 2';
});
#test_div {
   margin: 4em;
   padding:2em;
   background: blue;
   color: yellow;
}

#test_div:after {
   content:attr(title);
   background: red;
   padding:1em;
}
<button id='btn_change1'>Change div:after to [Status 1]</button>
<button id='btn_change2'>Change div:after to [Status 2]</button>

<div id='test_div' title='Initial Status'>The element to modify</div>

CSS ::before Selector, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  CSS pseudo-elements are incredibly useful -- they allow us to create CSS triangles for tooltips and perform a number of other simple tasks while preventing the need for additional HTML elements. To this point, these pseudo-element CSS properties have been unreachable by JavaScript

.before(), Description: Insert content, specified by the parameter, before each element in the Receives the index position of the element in the set and the old HTML value of Prior to jQuery 1.9, .before() would attempt to add or change nodes in the  EDIT: There is technically a way of directly changing CSS pseudo-element styles via JavaScript, as this answer describes, but the method provided here is preferable. The closest to changing the style of a pseudo-element in JavaScript is adding and removing classes, then using the pseudo-element with those classes.

CSS Content, It can only be used with the pseudo elements :after and :before. This fits with the idea of CSS, in that the HTML content doesn't need to change at all, The web inspector in WebKit browsers can target them, but don't show their property/​values. But with JavaScript, that attribute will be changed to something that won't  The code below is effectively a write mode however it is entirely possible to read CSS pseudo-element content as well. Since there is a bit involved I'll also post the prerequisites (source: JAB Creations web platform JavaScript documentation, if anything missing look it up there) so those who wish to try it out can fairly quickly do so.

How to access before/after pseudo element styles with JavaScript , A workaround is to use javascript / jquery to change the contents of an input field. Notes Before Firefox 57, Firefox had a bug where ::before pseudo-elements were still generated, even if the content property value were set to normal or none. Notes Before Firefox 3.5, only the CSS level 2 behavior of :before was supported, which disallowed position , float , list-style-* and some display properties.

Comments
  • see this similar question stackoverflow.com/questions/5041494/…
  • It is doable as in 2016 using jQuery.
  • content is a String; in 2019 it is: .style.setProperty('--varname',"${value}");
  • -@JamesAllardice this seems like a confusion-inducing decision by either the CSS or JS camps, do you know of any more context for this?
  • @timpeterson - The pseudo elements are there to provide a way to access otherwise inaccessible information about a document. They were never intended to be accessible from within the document. See the section on generated content in the CSS spec.
  • A little late to this party, but for future readers, this isn't entirely correct. You can't directly modify pseudo elements with JS, but you can use javascript to modify element attributes which pseudo elements can "read". See the question linked above: stackoverflow.com/questions/5041494/…
  • You can't modify pseudo elements through JavaScript since they are not part of the DOM. really?
  • this is no longer true. the below answers proved that you CAN.
  • @RhysvanderWaerden The referenced site refers to lack of support of the attr() function for properties other than content. Otherwise, the support for this solution seems pretty broad.
  • My mistake. Thanks for pointing it out. I'll delete my original comment since I cannot edit it.
  • do you know how to send unicode through this approach?
  • the problam with this is that it's not "anything" that you can set, html for eexample isn't interpreted.
  • @godblessstrawberry, I had the same question and found the answer on how to use unicode, here Example provided there was: <p><a href="#" data-fa-icon="&#xf206;"> Unicode example</a></p>
  • best answer here. append (prepend) worked and the rest of the methods (attr, html, ect) did not. I did add the css from the answer above which is the best way to clear out what was already there.
  • Thank you, I am glad it helped you!