Javascript set CSS :after styles

Question

Can you set the :after styles of css with Javascript?

So lets say:

$("#foo li:after").css("left","100px");

This can help: stackoverflow.com/questions/311052/…

WTK
– WTK

2011-09-07 07:38:40 +00:00
Commented Sep 7, 2011 at 7:38 — WTK
– WTK, Commented Sep 7, 2011 at 7:38
Added the jQuery tag as you seem to be using it.

T.J. Crowder
– T.J. Crowder

2011-09-07 07:42:29 +00:00
Commented Sep 7, 2011 at 7:42 — T.J. Crowder
– T.J. Crowder, Commented Sep 7, 2011 at 7:42

score 37 · Accepted Answer · 2011-09-07 08:05:07Z

37

var addRule = (function(style){
    var sheet = document.head.appendChild(style).sheet;
    return function(selector, css){
        var propText = Object.keys(css).map(function(p){
            return p+":"+css[p]
        }).join(";");
        sheet.insertRule(selector + "{" + propText + "}", sheet.cssRules.length);
    }
})(document.createElement("style"));

addRule("p:before", {
    display: "block",
    width: "100px",
    height: "100px",
    background: "red",
    "border-radius": "50%",
    content: "''"
});

A minimal implementation. You most likely would want to keep track of the rules you add so you can remove them. sheet.insertRule returns the index of the new rule which you can use to get a reference to it for editing or removal.

Edit: added basic functionality to convert an object into a css property string for convenience.

edited Sep 7, 2011 at 8:05

answered Sep 7, 2011 at 7:46

user748221

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

1 Comment

Scott Marcus Over a year ago

Seems like the content: property is not getting included.

Collectives™ on Stack Overflow

Javascript set CSS :after styles

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related