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

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

使用 CSS 伪元素，例如 ::before 和 ::after ，可以为元素添加额外的样式，而无需向 DOM 添加额外的内容。然而，选择和操作这些伪元素可能具有挑战性。

使用 jQuery 选择伪元素

jQuery 允许您使用与对于常规元素。例如，要选择 .span 类的 ::after 伪元素，您可以使用：

$('span:after')

要更改示例中的“foo”内容，您可以使用 jQuery css()方法：

$('span:after').css('content', 'bar');

使用 Vanilla JS

如果你愿意要使用普通 JS，您还可以使用 :before 和 :after 选择器选择伪元素。但是，它们需要比 jQuery 更复杂的语法：

document.querySelector('.span::after')

要修改内容，可以使用 style.content 属性：

document.querySelector('.span::after').style.content = 'bar';

操作伪元素使用 jQuery 的内容

另一种方法是使用数据属性来存储伪元素内容。在 HTML 中：

<span data-content="foo"></span>

在 jQuery 中，您可以使用 href() 方法来更新悬停时的内容：

$('span').hover(function(){
    $(this).attr('data-content', 'bar');
});

在 CSS 中，您可以使用 attr( ) 函数访问 data-content 属性并设置伪元素内容：

span:after {
    content: attr(data-content);
}

这允许您更改伪元素内容而无需添加额外的标记或覆盖现有的 CSS 规则。

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