Change the :before selector from javascript

css, javascript, pseudo-element

Solution

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.

Problem

How to change the :before content of #abc style from javascript ? ``` <script> document.getElementById('abc').style.content='-'; </script> <style> #abc:before{content:"+";} </style> ```

Original source

Related problems