Update CSS of Pseudo Element with jQuery

Question

I've spotted a number of posts stating that I can't manipulate a Pseudo Element with jQuery so I'm looking for a workaround?

I'm looking to run a a/b split test in Optimizely on our site search bar. The design of the current search bar has css that creates the search icon using the ::before Pseudo element to place a glyph-icon as a button to start the search.

As my test I wanted to change the colour of this icon. Optimizely allows you to use jQuery to target elements and make these types of changes.

The current css looks like this:

.header .form-search button:before, .header .form-search .search- button:before {
content: "\f002";
font-family: "polar-icons";
color: #237cb2;
font-size: 1.8rem;
}

This was the jQuery I was attempting to implement but it didn't work:

$(".search-button::before").css({'color':'#E93826'});

Any help greatly appreciated.

Why don't you just toggle a class? Because you cannot target pseudo elements using js/jquery `.search- button:before.sexyClass {color: #E93826; }` — A. Wolff, Jul 27 '15 at 13:11
http://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin — Shrinivas Pai, Jul 27 '15 at 13:13
Sorry, it should be: `.search-button.sexyClass:before {color: #E93826; }` — A. Wolff, Jul 27 '15 at 13:19

score 1 · Accepted Answer · answered Jul 27 '15 at 13:18

1

Try:

$('head').append('<style>.search-button::before{color:#E93826 !important}</style>');

answered Jul 27 '15 at 13:18

Ferrmolina

2,737
2
30
46

Update CSS of Pseudo Element with jQuery

1 Answers1