Any way to save a property in :before / :after using jquery

Question

Question: I know i can't access :before and :after selectors via jQuery by writing a code like this. Because :before / :after are not the part of the DOM.

$(document).ready(function(e){

  var beforebg = $('.SomeClass:before').css('background-color');

})

Is there any way i can save the value in a variable or there isn't any way at all? I know there are methods discussed here like on this post where it says that i make another class and define :before / :after on that class and then toggle that class using jQuery. But that is not my requirement here. I need this value to be stored in a variable so to use in my script.

Update: Why i need this to be stored in a vairable?
Please refer to my this question here to know what am doing. When i am able to store this value in a variable, i'd be able to iterate over DOM using each() and then i'll be able to add a specific class to an element that has a background-color equal to the color stored in that variable (beforebg in my case).

Update: Check this css code

.service-content:after {
   background: none repeat scroll 0 0 #eb2c33;
   border-radius: 100%;
   box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.09);
   content: "";
   height: 8px;
   left: 274px;
   margin-top: -58px;
   position: absolute;
   top: 50%;
   width: 8px;
   z-index: 3;
}

So can i store the value "background" color value ( "#eb2c33" in this case ) in the variable beforebg?

we can't access to pseudo-element to change its style (as well as attach anything). We can just access to it to ***read*** its style using `getComputedStyle` (a pure JS method). — King King, Jun 18 '14 at 05:46
show some html code and explain your problem /requirement clearly. — Bhushan Kawadkar, Jun 18 '14 at 05:48
you can simply use: **var beforebg = $('.SomeClass').css('background-color');** — mizanurahma, Jun 18 '14 at 05:52
Will the pseudo element have a dynamically generated background-color? Or, could you set that value as a data-attribute on the `service-content` element and query that instead? Something like: `
` ? — Jack, Jun 18 '14 at 06:03
@JackPattishallJr. No, this is the static website. So all css have already been written. Why i am writing this script so to avoid manually finding and adding class to those elements having backgrond-color as "#eb2c33". So adding data attribute would be something like i am already trying to avoid - Manual — Awais Umar, Jun 18 '14 at 06:13
@Symbolwdd There's a really hacky way of doing this...and I wouldn't recommend it unless it was the last resort. Here's a codepen (tested on Chrome only): http://codepen.io/anon/pen/xeLGa - Basically, looping through the styles/stylesheets, grepping the rules, and grabbing the color value that way. There are cross-browser concerns, but support is there for all browsers. — Jack, Jun 18 '14 at 06:19
@JackPattishallJr. I just started searching for a method to check stylesheets directly. And here is your link. I am gonna check it first of all.. Thank you... — Awais Umar, Jun 18 '14 at 06:28
@Symbolwdd No problem! I think the main issue is the complexity of it all for live sites. The codepen is simple: single style sheet, limited rules. With a site (and potentially multiple stylesheets), you're talking about nested loops. In addition, inherited properties might come into play. Good luck! :) — Jack, Jun 18 '14 at 06:31

score 0 · Answer 1 · answered Jun 18 '14 at 05:52

There is no psudeo selectors :before or :after in jquery. if you want try this way

$(document).ready(function(e){

    var beforebg = $('.SomeClass').addClass('sample');

});

In your style sheet

.SomeClass.sample:before,
.SomeClass.sample:after {
               background: #ccc;

     }

Any way to save a property in :before / :after using jquery

1 Answers1