April 8, 2012
Changing width property of a :before css selector using JQuery
Question by 4r1y4n
I have a page that has an image in it and I styled it using :before CSS selectors.
The image is dynamic so it hasn’t a fixed width; So I need to set :before rule’s width dynamically.
I want do it in client side using JQuery.
Assume this:
.column:before{
width: 300px;
float: left;
content: "";
height: 430px;
}
.column{
width: 500px;
float: right;
padding: 5px;
overflow: hidden;
text-align: justify;
}
How Can I only change the width property of class with :before selector (and not one wothout it) using JQuery?
Thanks
Answer by m90
I don’t think there’s a jQuery-way to directly access the pseudoclass’ rules, but you could always append a new style element to the document’s head like:
$('head').append('<style>.column:before{width:800px !important;}</style>');
See a live demo here
I also remember having seen a plugin that tackles this issue once but I couldn’t find it on first googling unfortunately.
Answer by Starx
Pseudo-elements are not part of the DOM, so they can’t be manipulated using jQuery or Javascript.
