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 do I change the alignment of my search box?

    How to make the div at the screen center not lower right corner?

    Generated web font doesn't show dots above Ü

    How to put all my elements in line horizontally and Should be Responsive using bootstrap?

    How to make a button CSS change only IF form fields are valid

    How can I convert this from jQuery to vanilla JS?

    How HTML Inheritance works with conflicting styles rules in CSS?

    Yahoo's new blur effect in web mail - How?

    How to set out css properly?

    How can I align a logo AND a heading to the centre of a page?

    How to center align text over CSS shape?

    How to solve buggy line-height on input fields?

    CSS, how to align a button vertically next to large images

    How do I do rounded corners in CSS in Google Chrome

    How do I enable SASS line numbers in CSS output?

    how to display a list inline using HTML and CSS

    how to print no blur content over a blurred div

    How can I know if the user tampered with the CSS or JavaScript to change the appearance of my website?

    how to format a single html a href text to have multiple css properties (two different font families)

    how to make labels and button appear only when mouse is over a div in asp.net C#

    How to replace fixed values in responsible form css

    How can I make inputs display inline?

    How to locate element on a map by xpath or css selector

    how to fix menu bar css-adapter stuffs with IE

    How to make to div comes the one under the other

    How does CSS works under the hood? [closed]

    How to center CSS Navigation Menu

    How to make div scroll down with a page once it reaches top of page?

    How to implement Read more / Read less in pure CSS

    Use ajax to show-hide only a subset of image