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

Question

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?

Why do you add a comma after each semicolon? Extra comma I would say. — user4759923
– user4759923, Commented Aug 26, 2015 at 5:59
you'd be better off adding the css selector and the set of styes to the css file then using js to add and remove a class as required, then your css rules are easier to re-use and your js is a lot less cluttered — Toni Leigh
– Toni Leigh, Commented Aug 26, 2015 at 6:47

Moishe Lipsker · Accepted Answer · 2015-08-26 06:08:05Z

2

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

edited Aug 26, 2015 at 6:08

answered Aug 26, 2015 at 5:59

Moishe Lipsker

3,0322 gold badges23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mosh Feu Over a year ago

This code will not work too. He needs to remove the ,

sam No1 Over a year ago

Thanks friend. The css is for a css triangle. the width is not needed so it should be 0. I figured that the problem with my code was that extra , as @MoshFeu pointed.. :)

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related