CSS中如何根据ID改变伪元素内容

Question

<span id="opensidebarid" class="icon"></span>

CSS：

.icon:before {
   content: 'close';
}

我想使用 JavaScript (jQuery) 中的 ID 更改 :before 的内容。怎么可能？我尝试过使用prop，但根本不工作。

Answer 1

您可以在 CSS 中设置一个属性以从那里获取内容数据，然后您可以使用 jQuery 更改该属性，因为您无法直接更改 :before 元素的内容：

CSS：

.icon:before {
   content: attr(data);
}

jQuery:

$(document).ready(function(){
  $elem = $("#opensidebarid"); // Get element by ID.
  elemClass = $elem.attr("class"); // Get the class of that element in order to change content.
  $('.' + elemClass).attr('data', "open"); // Change attribute value of content.
});

Answer 2

想了一会儿，我明白了你的问题。 ::before 是一个伪选择器，而不是 DOM 元素。所以你不能通过 jQuery 选择它。

如果想更改 ::before，可以通过 jQuery 切换类。

你可以通过创建一个切换类来改变它。 例如：

.icon-toggle {content: "example" !important}

然后您可以创建 onclick 或一些操作来切换更改。

$("#opensidebarid").toggleClass("icon-toggle")

如果你能写更详细的问题，我可以帮助你更多。