jQuery change background color box after and before elements

Question

this is my example > http://jsfiddle.net/YXqu2/

I need your help.

I append box in my html and this box have after and before elements and with jQuery i random give the box elements some backgrounds and i want to change also the before and after elements border color i write some code but it doesn't work if you can please help me.

And sorry my bad English.

Thank you

You can't change using javascript or jquery. http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery-e-g-before-and-after — Morpheus, Sep 20 '13 at 09:54
Pseudo-elements themselves are not part of the DOM. Does it matters what you want to change, if it is not possible??? — Morpheus, Sep 20 '13 at 10:03

score 2 · Answer 1 · answered Sep 20 '13 at 10:21

You cannot use jquery to change the styles of psuedo classes as you cannot select them, but you can inject a new style element into the head to change them

HTML

<div class="container">
Container       
</div>

JS

var redAfter = jQuery('<style>.container:after{border:1px solid #F00; }</style>');
var blueAfter = jQuery('<style>.container:after{border:1px solid #00f; }</style>');

jQuery("#change1").click(function(){
   blueAfter.remove();
   jQuery("head").append(redAfter);
});

jQuery("#change2").click(function(){
   redAfter.remove();
   jQuery("head").append(blueAfter);
});

Fiddle Demo

I do not know if this would cause any issues performance wise. It might if you have a lot of pseudo elements that you need to change etc. I think keeping an object of the style so you can remove them when not needed might be good though. Also not sure how cross browser compatible this is, works in chrome.

Probably should change your code to use actual objects instead of pseudo ones if possible.

score 1 · Accepted Answer · answered Sep 20 '13 at 10:35

I tried adding DIVs for arrows with your already existing append(), and switching your pseudo classes to classe

JS :

$(".line").append("<div class='arrowLeft' style='border-left:12px solid " + random_color + ";'></div><div class='arrowRight' style='border-right:12px solid " + random_color + ";'></div><div class='lines_type' style='background:" + random_color + ";'></div>");

CSS :

.line .arrowLeft {
    border-bottom: 7px solid transparent;
    border-left: 12px solid orange;
    border-top: 7px solid transparent;
    content:"";
    height: 0;
    margin-right: -4px;
    margin-top:70px;
    float:right;
    width: 0;
}
.line .arrowRight {
    border-bottom: 7px solid transparent;
    border-right: 12px solid orange;
    border-top: 7px solid transparent;
    content:"";
    height: 0;
    margin-left: -4px;
    margin-top:70px;
    float:left;
    width: 0;
}

Fiddle

jQuery change background color box after and before elements

2 Answers2