如何为CSS伪元素:after生成的形状应用jQuery事件？

嘿，这个问题其实挺常见的——答案是不行，jQuery没法直接操作CSS伪元素，原因很简单：

CSS伪元素（比如:after、:before）是浏览器通过CSS渲染出来的“虚拟元素”，它们并不存在于HTML的DOM树里。而jQuery的所有操作都是基于真实DOM节点的，它根本找不到这些伪元素，更别说给它们绑定函数或者修改样式了。

不过别担心，有几种间接的方法能实现你想要的效果：

1. 通过父元素的类切换控制伪元素 #

这是最常用的方案：给你的<a>标签（就是带.home、.about类的那个元素）添加/移除一个额外的类，然后在CSS里针对这个类组合来修改伪元素的样式。

举个例子：

/* 默认的伪元素样式 */
.home:after {
  content: '';
  width: 10px;
  height: 10px;
  background-color: black;
  /* 其他样式细节 */
}

/* 当父元素有.active类时的伪元素样式 */
.home.active:after {
  background-color: white;
}

然后你的jQuery代码只需要操作父元素的类就行：

$('.home').click(function() {
  // 切换.active类
  $(this).toggleClass('active');
  // 同时处理文本颜色的切换
  const textColor = $(this).hasClass('active') ? 'white' : 'black';
  $(this).css('color', textColor);
});

2. 用CSS变量（自定义属性）间接控制 #

如果你的项目支持现代浏览器，用CSS变量会更灵活：先在父元素上定义变量，让伪元素引用这个变量，然后jQuery直接修改父元素的变量值，伪元素的样式就会跟着变。

示例代码：

.home {
  /* 定义伪元素用的颜色变量 */
  --shape-color: black;
}

.home:after {
  content: '';
  width: 10px;
  height: 10px;
  background-color: var(--shape-color);
}

jQuery部分：

$('.home').click(function() {
  // 获取当前变量值
  const currentShapeColor = $(this).css('--shape-color');
  // 切换颜色
  const newShapeColor = currentShapeColor === 'black' ? 'white' : 'black';
  // 修改变量
  $(this).css('--shape-color', newShapeColor);
  // 同步修改文本颜色
  $(this).css('color', newShapeColor);
});

3. 替换成真实DOM元素（极端情况） #

如果你的需求特别复杂（比如要给那个形状绑定点击事件），伪元素就满足不了了——这时候你可以把伪元素换成真实的<span>或者<i>标签，放在<a>里面，这样它就成了DOM的一部分，jQuery可以直接操作它。

比如HTML改成：

<li><a href="#" class="home">Home <span class="shape"></span></a></li>

然后CSS给.shape设置样式，之后就能用jQuery直接选.home .shape来操作了。

总的来说，伪元素没法直接被jQuery操作，但通过父元素的类、CSS变量，或者替换成真实DOM元素，完全能实现你想要的交互效果。

内容的提问来源于stack exchange，提问作者Matt Black