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
– A. Wolff, Commented Jul 27, 2015 at 13:11
Sorry, it should be: .search-button.sexyClass:before {color: #E93826; } — A. Wolff
– A. Wolff, Commented Jul 27, 2015 at 13:19

Ferrmolina · Accepted Answer · 2015-07-27 13:18:25Z

1

Try:

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

answered Jul 27, 2015 at 13:18

Ferrmolina

2,7692 gold badges33 silver badges48 bronze badges

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

Collectives™ on Stack Overflow

Update CSS of Pseudo Element with jQuery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related