使用jQuery在伪元素上使用.css（）

Question

var navIcon1 = $('.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after');

if (iconPos >= audPos && iconPos < eventPos) {
  navIcon.css('color', 'black');
  navIcon1.css('color', 'black');

} 

I am trying to change the color of bootstrap navigation. I tried this code but it is not working for me.
Can I change the CSS of pseudo elements with jQuery?

Answer 1

而不是在if中添加css，为给定位置添加一个clas到“nav-toggle”并为该类添加颜色

Answer 2

The only one of the elements you can modify using this method is .nav-toggle span , you could do:

if (iconPos >= audPos && iconPos < eventPos) {
  $(".nav-toggle span").css('color', 'black');
} 

As to the other ones: :before , :after etc. are pseudo elements - jQuery can't access them the way you are trying to do it.

Adding a class containing your preferred color to the elements you want to change would be a way of achieving what you want to achieve.