Adding a pseudo style from jquery

Question

Am having a trouble with following code. The problem when adding the following style from jquery.

CSS

  .arrow_box {
position: absolute;
width: 24px;
border-radius: 30px 30px 3px 3px;
height: 17px;
float:left;
 }
.arrow_box:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: #88b7d5;
border-width: 14px;
left: 0%;
 }

jQuery

<script type="text/javascript">
$(document).ready(function () {
    $('.arrow_box:after').css({
        "border-color": "red",
            "border-top-color": " #88b7d5",
            "border-width": "12px",
            "left": "0%"
    });
});
</script>

There will not have any jquery error but it is not working

possible duplicate of Setting CSS pseudo-class rules from JavaScript — Felix Kling
– Felix Kling, Commented Sep 14, 2013 at 10:38
stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery-e-g-before-and-after/5335771 and stackoverflow.com/questions/8095177/jquery-using-after-selector. It would have benefited had you yourself looked this up. — verisimilitude
– verisimilitude, Commented Sep 14, 2013 at 10:41

Krasimir · Accepted Answer · 2013-09-14 10:40:16Z

2

You can't directly do this with jquery. But here solution with pure javascript http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/

answered Sep 14, 2013 at 10:40

Krasimir

13.6k4 gold badges45 silver badges58 bronze badges

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

1 Comment

Emmanuel Over a year ago

The link is broken. I found this: web.archive.org/web/20170616025900/http://www.4pmp.com/2009/11/…

Mitya · Accepted Answer · 2013-09-14 10:35:58Z

1

Pseudo elements are not DOM elements targetable with JavaScript.

answered Sep 14, 2013 at 10:35

Mitya

34.7k15 gold badges70 silver badges125 bronze badges

1 Comment

Well Wisher Over a year ago

is there a way to add this dynamically.?

Tushar Gupta - curioustushar · Accepted Answer · 2013-09-14 10:38:18Z

1

Pseudo elements are not DOM elements so you can not access them using JavaScript or jQuery.

answered Sep 14, 2013 at 10:38

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Collectives™ on Stack Overflow

Adding a pseudo style from jquery

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related