CODEWITHSUNDEEP
javascriptcsshtmldom
sam No1
sam No1

Reputation: 153

How to add multiple style rules to css pseudo elements using js?

I have follwing html, css and js

HTML

<a href="#" class="name">name</a>

CSS

a {
    position: relative;
}

JS

var styleString = 'content:" ";, width: 0, height: 0;, border-style: solid;, border-width: 100px 100px 0 100px;, border-color: #007bff transparent transparent transparent;, position: absolute;';

document.styleSheets[0].addRule('.name:after', styleString);

DEMO

My question is only the content: " " is getting added and the rest of the rules are missing. What is the wrong with my code?

Upvotes: 2

Views: 90

Answers (1)

Moishe Lipsker
Moishe Lipsker

Reputation: 3032

As @MoshFeu has already pointed out, the commas after each ; are not necessary and should be removed:

The full code:

var styleString = 'content:" "; width: 0; height: 0; border-style: solid; border-width: 100px 100px 0 100px; border-color: #007bff transparent transparent transparent; position: absolute;';

document.styleSheets[0].addRule('.name:after', styleString);

Upvotes: 2

Related Questions