如何仅选择含::before/::after伪元素的元素并设置样式

你的原写法存在核心问题：:has()选择器选中的是拥有伪元素的父元素本身，而伪元素的content属性及样式必须直接写在::before/::after选择器上，写在父元素上完全无效。

下面是几种可行的解决思路：

1. 全局统一设置所有伪元素基础样式 #

如果想给页面中所有元素的::before/::after设置通用样式，直接使用全局伪元素选择器即可：

*::before, *::after {
  content: ''; /* 伪元素必须有content才会渲染，空字符串也可 */
  display: inline-block; /* 根据需求设置显示类型，比如块级或行内块 */
  /* 其他自定义样式示例 */
  border: 1px solid #eee;
  margin: 0 4px;
}

2. 仅给存在伪元素的元素的伪元素加特定样式 #

如果只想针对已定义伪元素的元素（比如其他CSS规则中已经声明了该元素的伪元素）设置额外样式，可以结合:has()精准定位，但样式仍需绑定到伪元素选择器上：

/* 给拥有::before的元素的伪元素添加背景色 */
*:has(::before)::before {
  background-color: #f5f5f5;
}

/* 给拥有::after的元素的伪元素添加圆角 */
*:has(::after)::after {
  border-radius: 4px;
}

3. 兼容性方案（不依赖:has()） #

如果需要兼容不支持:has()的旧浏览器，最稳妥的方式是给需要伪元素的元素手动添加类名，再针对类的伪元素编写样式：

/* 给带.with-pseudo类的元素的伪元素设置样式 */
.with-pseudo::before, .with-pseudo::after {
  content: '';
  /* 自定义样式示例 */
  padding: 2px 4px;
  color: #666;
  font-size: 0.8em;
}

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