jquery - 使用 jQuery 更新伪元素的 CSS

Question

我发现很多帖子说我无法使用 jQuery 操作伪元素，所以我正在寻找解决方法？

我希望在我们的网站搜索栏上的 Optimizely 中运行 a/b 对比测试。当前搜索栏的设计包含使用::before 伪元素创建搜索图标的 CSS，以放置一个字形图标作为开始搜索的按钮。

作为我的测试，我想改变这个图标的颜色。 Optimizely 允许您使用 jQuery 定位元素并进行这些类型的更改。

当前的 css 是这样的:

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

这是我试图实现的 jQuery，但它不起作用:

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

非常感谢任何帮助。

Answer 1

尝试:

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