How change content value of pseudo :before element by Javascript

Question

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?

see this similar question http://stackoverflow.com/questions/5041494/manipulating-css-before-and-after-pseudo-elements-using-jquery — antyrat, May 08 '12 at 08:38
content is a **String**; in 2019 it is: **.style.setProperty('--varname',`"${value}"`);** — Danny '365CSI' Engelman, Jan 08 '19 at 15:47

score 110 · Answer 1 · edited Sep 13 '19 at 12:25

110

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;
}

edited Sep 13 '19 at 12:25

boop

7,413
13
50
94

answered Feb 02 '17 at 10:44

Santosh D

1,172
2
7
5

@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](https://www.w3schools.com/cssref/func_attr.asp). – JustinStolle Jul 06 '17 at 01:31
My mistake. Thanks for pointing it out. I'll delete my original comment since I cannot edit it. – Rhys van der Waerden Jul 07 '17 at 02:33
1

do you know how to send unicode through this approach? – godblessstrawberry Nov 01 '17 at 21:07
the problam with this is that it's not "anything" that you can set, html for eexample isn't interpreted. – tatsu Apr 10 '18 at 07:34
2

@godblessstrawberry, I had the same question and found the answer on how to use unicode, [here](https://stackoverflow.com/a/34602358/4814971) Example provided there was: `
Unicode example
` – Jacques May 14 '18 at 23:00
1

This solution is really clever (in my opinion) and solved my issue well, thank you @santosh-d! – vcoppolecchia Sep 13 '19 at 10:43
1

Very helpful solution – Payel Dutta Aug 18 '21 at 20:58

James Allardice · Accepted Answer · 2018-04-10T07:47:10.603

35

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.

edited Apr 10 '18 at 07:47

answered May 08 '12 at 08:37

James Allardice

164,175
21
332
312

-@JamesAllardice this seems like a confusion-inducing decision by either the CSS or JS camps, do you know of any more context for this? – tim peterson May 08 '12 at 08:45
2

@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](http://www.w3.org/TR/css3-content/#pseudo-elements) in the CSS spec. – James Allardice May 08 '12 at 08:54
6

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: http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-such-as-before-and-after-using-jquery – goldins Mar 18 '15 at 16:06
`You can't modify pseudo elements through JavaScript since they are not part of the DOM.` really? – xgqfrms Jun 03 '17 at 08:52
Maybe you should read this first! @james-allardice [https://stackoverflow.com/a/44342130/5934465](https://stackoverflow.com/a/44342130/5934465) – xgqfrms Jun 03 '17 at 09:15
1

this is no longer true. the below answers proved that you CAN. – tatsu Apr 10 '18 at 07:41

score 31 · Answer 3 · answered May 22 '18 at 13:34

31

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

answered May 22 '18 at 13:34

Gennadiy Gorbulin

411
4
2

1

Good solution, but this doesn't seem to work for setting the `content` property. If someone knows how to do this, please post an example. – TwoFingerRightClick Jul 27 '21 at 23:03

score 12 · Answer 4 · answered Oct 01 '17 at 02:03

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>

score 5 · Answer 5 · answered Nov 14 '16 at 13:42

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

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. — tatsu, Apr 10 '18 at 07:41

score 1 · Answer 6 · answered Apr 12 '20 at 09:42

I had a similar problem, but with icons. I needed to switch the play and pause icons for an audio player in html5.

The problem here was that HTML, CSS and jQuery all interpret differently the "content" values to show icons, due to the use of \ symbol.

So the best workaround is to delete and re-create the node. Here's my code:

<ul class="list list--buttons">
    <li><a href="#" class="list__link previuos"><i class="fa fa-step-backward"></i></a></li>

    <li><a href="#" class="list__link playpause"><i class="fa fa-play"></i></a></li>

    <li><a href="#" class="list__link next"><i class="fa fa-step-forward"></i></a></li>
</ul>

And the script

<script type="text/javascript">
            $(
                function(){
                    var aud = $('audio')[0];
                    $('.playpause').on('click', function(e){
                        e.preventDefault();
                    if (aud.paused) {
                        aud.play();
                        /* from play icon to pause icon */
                        $('.playpause .fa-play').remove();
                        $('.playpause').append('<i class="fa fa-pause"></i>');
                    }
                    else {
                        aud.pause();
                        /* from play icon to pause icon */
                        $('.playpause .fa-pause').remove();
                        $('.playpause').append('<i class="fa fa-play"></i>');
                    }

                })
                $('.next').on('click', function(e){
                    e.preventDefault();
                    aud.src = '{$content:audio-file}';
                })
                $('.previuos').on('click', function(e){
                    e.preventDefault();
                    aud.src = '{$content:audio-file}';
                })
                aud.ontimeupdate = function(){
                    $('.progress').css('width', aud.currentTime / aud.duration * 100 + '%')
                }
            })
        </script>

Hope it helps!

score 1 · Answer 7 · answered Jun 13 '20 at 10:30

1

You can use document.styleSheets to modify pseudo selector cssRules

document.styleSheets[0].cssRules[0].style.content = '"111"';

answered Jun 13 '20 at 10:30

michael

111
1
4

This tell us it actually CAN be done, without the `content: attr(...)` (and I'd almost +1 you for it), but should it be done that way? Only if you wish to change your Twitter bio from "Developer of web applications" to "Maintainer of one project". – s3c Aug 02 '21 at 13:30

GerA · Answer 8 · 2019-02-20T12:10:52.583

If you use something like an onoffswitch and want to translate the css content attribute with i18next then you can use one of the i18next Framework example from github (i18next Jquery Framework) and then you extended the function with this code:

var before = i18next.t('onoffswitch.before');
var after = i18next.t('onoffswitch.after');
$('.onoffswitch-inner')
    .attr('data-before', before )
    .attr('data-after', after );

and the css code must be this:

.onoffswitch-inner:before {
    content:  attr(data-before);
    padding-left: 10px;
    background-color: #65AFF5; color: #FFFFFF;
}
.onoffswitch-inner:after {
    content:  attr(data-after);
    padding-right: 10px;
    background-color: #EEEEEE; color: #999999;
    text-align: right;
}

How change content value of pseudo :before element by Javascript

8 Answers8

Linked

Related