如何使用 JavaScript/jQuery 选择和操作 CSS 伪元素（::before、::after）？

使用 JavaScript/jQuery 选择和操作 CSS 伪元素

使用 JavaScript 或 jQuery 选择和操作 ::before 和 ::after 等 CSS 伪元素，您可以采用几种不同的技术。

使用操作内容jQuery

jQuery 允许您检索和操作伪元素的内容，如下所示：

// Get the content of ::after for an element with class "span"
var content = $('.span::after').text();

要更改内容，只需分配一个新值：

// Change the content of ::after for elements with class "span"
$('.span::after').text('bar');

用数据操作内容属性

或者，您可以使用数据属性和 jQuery 将内容传递给伪元素：

<!-- Element with a data attribute -->
<span data-content="foo">foo</span>

// Get the content from the data attribute
var content = $('span').attr('data-content');

// Manipulate the pseudo-element content
$('.span::after').text(content);

要更改悬停时的内容，您可以结合使用此方法使用事件处理程序：

$('span').hover(function() {
  // Change the content of ::after on hover
  $(this).attr('data-content', 'bar');
});

span::after {
  content: attr(data-content) /* Combine this with seucolega's solution */ ' any other text you may want';
}

通过使用这些技术，您可以动态控制内容以及 Web 应用程序中伪元素的出现。

以上是如何使用 JavaScript/jQuery 选择和操作 CSS 伪元素（::before、::after）？的详细内容。更多信息请关注PHP中文网其他相关文章！