用 jQuery 更新伪元素的 CSS

Question

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

我正在寻找运行 a/b 在我们网站搜索栏上的 Optimizely 拆分测试。当前搜索栏的设计 css 使用 ::before 伪元素创建搜索图标，放置一个字形图标作为开始搜索的按钮。

作为我的测试，我想改变这个图标的颜色。 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>');

用 jQuery 更新伪元素的 CSS

Update CSS of Pseudo Element with jQuery

css

jquery

pseudo-element