如何使用jQuery/JavaScript移除或隐藏::before伪元素的内容

你之前修改data-before属性的方案仅在CSS规则中明确将.element::before的content属性设置为attr(data-before)时才会生效，否则不会对伪元素产生任何影响。

::before和::after属于CSS伪元素，不属于DOM树节点，所以JavaScript/jQuery无法直接选中并操作它们，只能通过修改关联的CSS规则或者宿主元素的属性/类名来间接控制，以下是可行的实现方案：

方案1：新增CSS类控制（最推荐，性能最高、易维护） #

首先在你的CSS中添加控制类规则：

/* 新增控制类 */
.hide-before::before {
  display: none !important;
  /* 如果仅需要清空内容不需要隐藏占位，也可以写 content: none !important; */
}

然后用jQuery/JS切换类即可：

// 隐藏::before
$(".element").addClass("hide-before");
// 需要恢复时执行
$(".element").removeClass("hide-before");

方案2：动态插入CSS规则（不需要提前修改CSS代码） #

如果不方便提前修改CSS文件，可以直接通过JS动态插入样式规则：

// jQuery 写法
$('<style>.element::before { display: none !important; }</style>').appendTo('head');

// 原生JS写法
const style = document.createElement('style');
style.textContent = '.element::before { display: none !important; }';
document.head.appendChild(style);

方案3：确认伪元素绑定了data-before属性时可用 #

如果你的原有CSS已经是如下写法：

.element::before {
  content: attr(data-before);
  /* 其他样式 */
}

可以用以下代码修改，确保属性修改同步到DOM：

// 清空内容
$(".element").attr('data-before', '');
// 恢复内容就重新赋值即可
$(".element").attr('data-before', '需要显示的内容');

内容的提问来源于stack exchange，提问作者code 8