Pseudo-element CSS dynamically using JavaScript

Question

Is it possible to set CSS pseudo-element dynamically? For instance:

jQuery dynamic styling support container

$('#help').css({
    "width" : windowWidth - xOffset,
    "height" : windowHeight - yOffset,
    "bottom" : -windowHeight,
    "left" : 200
});

jQuery Trying to set the inner border of a help container:

$('#help:before').css({
    "width" : windowWidth - xOffset,
    "height" : windowHeight - yOffset
});

CSS file for above

#help
{
    opacity: 0.9;
    filter:alpha(opacity=90);   
    -moz-opacity: 0.9;          
    z-index: 1000000;
    bottom: -550px;
    left: 400px;
    background-color: #808080;
    border: 5px dashed #494949;
    -webkit-border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;        
}
#help:before 
{
    border: 5px solid white;
    content: '';
    position: absolute;
    -webkit-border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px 20px;          
}

Answer 1

You cannot do this directly through jQuery.

Have a look at this question: Setting CSS pseudo-class rules from JavaScript

@ The answer in Box9 is probably the one you really should use:

JS.

Answer 2

, .css(), .width() height() .