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](http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript) — Felix Kling, Sep 14 '13 at 10:38
stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery-e-g-before-and-after/5335771 and http://stackoverflow.com/questions/8095177/jquery-using-after-selector. It would have benefited had you yourself looked this up. — verisimilitude, Sep 14 '13 at 10:41

score 2 · Answer 1 · answered Sep 14 '13 at 10:40

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 '13 at 10:40

Krasimir

13,306
3
40
55

The link is broken. I found this: https://web.archive.org/web/20170616025900/http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/ – Emmanuel Jun 28 '18 at 18:51

score 1 · Answer 2 · answered Sep 14 '13 at 10:35

1

Pseudo elements are not DOM elements targetable with JavaScript.

answered Sep 14 '13 at 10:35

Mitya

33,629
9
60
107

is there a way to add this dynamically.? – Well Wisher Sep 14 '13 at 10:38

score 1 · Answer 3 · answered Sep 14 '13 at 10:38

1

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

answered Sep 14 '13 at 10:38

Tushar Gupta - curioustushar

58,085
24
103
107

Adding a pseudo style from jquery

3 Answers3