Changing width property of a :before css selector using JQuery

Question

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 without it) using JQuery?

Answer 1

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.

Changing width property of a :before css selector using JQuery

Sign up