Change the :before selector from javascript

Question

How to change the :before content of #abc style from javascript ?

<script>
document.getElementById('abc').style.content='-';
</script>

<style>
#abc:before{content:"+";}
</style>

Some nice answers are [here](http://stackoverflow.com/questions/4481485/changing-css-pseudo-element-styles-via-javascript). — Yauheni Leichanok, Mar 26 '14 at 11:13

score 4 · Accepted Answer · answered Mar 26 '14 at 11:22

No, you cannot access :before or :after from javascript, because they are not a part of the DOM. However you can still achieve your goal by using CSS classes:

<script>
    document.getElementById('abc').className = "minus";
</script>

<style>
    #abc:before {content: "+";}
    #abc.minus:before {content: "-"}
</style>

In fact this approach is more unobtrusive, because you don't mix representation with javascript. Tomorrow you might want to change text "+/-" to say nice background images, in this case you don't have to touch javascript code at all.

score 0 · Answer 2 · edited May 23 '17 at 12:33

0

As far as I know you cannot change the before since it is a pseudo element and not part of the DOM. What you can do is maybe add another class with javascript that has a seperate before specification.

Please see if this question can help you do a work-around Changing width property of a :before css selector using JQuery

edited May 23 '17 at 12:33

Community

1
1

answered Mar 26 '14 at 11:13

user3218338

652
1
8
20

1

-1 for jQuery related answer on a question without the [tag:jquery] tag. – SeinopSys Mar 26 '14 at 11:24

score 0 · Answer 3 · answered Mar 26 '14 at 11:13

0

jQuery cannot set css properties on :before content, since it is not contained in an element. If you want to be able to manipulate the color of the :before content with javascript, you can create an extra css class, and add/remove this class.

answered Mar 26 '14 at 11:13

WhiteLine

1,919
2
25
53

score 0 · Answer 4 · answered Oct 23 '17 at 11:08

So update #abc to

#abc {
content: attr(data-before);
}

and ensure that the element that #abc refers to has a data attribute e.g

Then in your js, you can access the data-before attribute using the HTML data API and as you modify that, the content will change too.

Does that make sense?

Change the :before selector from javascript

4 Answers4

Linked