能否使用::before::before伪元素？请求重开未解决技术帖

首先明确：CSS伪元素（::before/::after）只能附着在真实DOM元素上，无法嵌套使用，.alpha::before::before这种写法不符合CSS规范，浏览器会直接忽略该选择器，这就是你写法失效的核心原因。

因为你无法修改HTML结构，且已使用了.alpha的::before和::after伪元素，这里提供几种可行的替代方案：

• 用box-shadow模拟额外图形元素
  如果你需要添加的是简单色块、图形类内容，可以通过多层box-shadow来模拟多个"虚拟元素"，示例代码：

  .alpha::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: #ff4444;
    /* 逗号分隔，每一组阴影对应一个额外图形 */
    box-shadow: 40px 0 0 #0099cc, 80px 0 0 #77dd77;
  }
  

  注意：这种方式只能生成图形，无法添加文本内容。

• 用多重背景实现多区块内容
  如果需要的是带颜色或简单图案的内容，可通过多重背景来模拟多个独立区块，示例代码：

  .alpha::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 20px;
    /* 多个背景图（这里用纯色渐变模拟），分别定义位置和尺寸 */
    background-image: linear-gradient(#ff4444, #ff4444),
                      linear-gradient(#0099cc, #0099cc);
    background-position: 0 0, 45px 0;
    background-size: 40px 20px, 40px 20px;
    background-repeat: no-repeat;
  }
  

• 拆分伪元素content实现多文本内容
  如果需要添加文本内容，可以将多个文本放在同一个伪元素的content中，通过换行符和布局技巧拆分显示，示例代码：

  .alpha::before {
    content: "第一行内容\A第二行内容";
    white-space: pre; /* 保留换行符 */
    display: flex;
    flex-direction: column;
    gap: 8px; /* 控制两行间距 */
    color: #333;
  }
  

• 利用现有子元素的伪元素
  如果.alpha内部存在未使用伪元素的子元素（哪怕你不能修改HTML结构），可以直接给子元素添加伪元素，比如：

  .alpha .beta::before {
    content: "额外内容";
    /* 样式设置 */
  }
  

内容的提问来源于stack exchange，提问作者WEB Last Wolf