Change Pseudo Property via Jquery?

Question

I have the stylesheet:

#progress
{
    width:100px;
    height:8px;
    background-color:#CCCCCC;
    position:relative;
}
#progress:before
{
    content:"";
    position:absolute;
    left:0;
    background-color:#0066CC;
    width:50px;
    height:8px;
}

HTML content

<div id="progress">

I want to change the property width:50px of #progress:before by jquery

$('#progress:before').css('width',60);

but it doesn't work. can any one help me. I'm not good at English, thank you!

You want to change the css for the previous element of div#progress. right? — Chetan Bhopal, Jun 03 '13 at 11:30
@ChetanBhopal, no, he wants to change the CSS of a pseudo-element created with CSS `:before` and `content: ''`, and this of course cannot be done. — Derek Henderson, Jun 03 '13 at 11:38

score 1 · Answer 1 · answered Jun 03 '13 at 11:33

1

pseudo-elements themselves are not part of the DOM, and thus you can't select and manipulate them directly with jQuery (or any JavaScript APIs for that matter, not even the Selectors API). things you are doing are not possible :)

answered Jun 03 '13 at 11:33

Ashisha Nautiyal

1,389
2
19
39

score 1 · Answer 2 · edited May 23 '17 at 11:49

1

The pseudo selector modifies, not selects. The content created is purely presentational and is not injected into the DOM. Thus, you can't do what you'd like to do with jQuery.

For a more thorough answer, see How do I access style properties of pseudo-elements with jQuery?.

edited May 23 '17 at 11:49

Community

1
1

answered Jun 03 '13 at 11:35

Derek Henderson

9,388
4
42
71

Change Pseudo Property via Jquery?

2 Answers2