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


Tags: javascript,html,css,html5,dom

Problem :

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?



Solution :

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

    CSS Howto..

    How to apply css style when using ng-print inAngular JS

    How to add scrollable tooltip HTML?

    How to change CSS in media tag within @media only tags with jquery?

    How can I avoid using too many classes in CSS?

    How to use CSS filters in JavaScript?

    How do I allow CSS files to be referenced from other domains?

    How do I override css for a particular control? [closed]

    CSS: How to center text with surrounding borders

    css/javascript - How to achieve these unusual design requirements? [closed]

    How to expand sidebars sub-menu to the correct size?

    how to make an empty span collapse

    How can I fill the remaining space when dealing with an inline ul?

    How to create shadow in JSF input field

    how to link stylesheet in css

    How to cycle odd and even when using ajax append?

    How do browsers change font-weight if it's not present in the current font?

    how to center perfectly image and text inline in the center of page

    How to compile sass / scss without creating map files

    How to change the background color of the heading from transparent to paint white?

    How to use CSS Background-size: cover; but leave space for menu?

    only show those div where i do mouse-over

    How to achieve Expand collapse Side Nav with icon using jquery and boostrap css

    How to change color of the selected item from a Xul listbox?

    How can I prevent the Featherlight lightbox from creating recursive dialogs?

    Truncate text in floated box and show it entirely when hovering

    How to customize the CSS of a theme generated with the ThemeBuilder?

    How to make a “” looks like a link with CSS?

    How to position children with respect to parent in CSS?

    CSS and jQuery - how to force 2 rules to work together

    How to center vertically child elements inside div [duplicate]