如何在同一容器中实现多个CSS伪元素共存

CSS 规范里单个普通 DOM 元素只原生提供::before和::after两个伪元素，二者都是绑定在元素上的唯一虚拟节点。你重复三次声明.container::after的样式，属于对同一个选择器的重复定义，按照CSS层叠规则，后写的声明会覆盖前面的同属性配置，最终永远只会渲染最后一次定义的::after效果，不可能靠重复声明同个伪元素生成多个独立虚拟层。

方案1：加1个空标签实现（生产环境首选，全兼容易维护） #

只需要在容器内部加一个无实际内容的空标签（比如<span>），这个空标签本身也自带::before/::after两个伪元素，和容器的两个伪元素组合起来足够承载3个独立装饰层，后续要加更多装饰效果也可以用同样方式扩展，从IE9到所有现代浏览器全兼容，样式调整也最灵活。
对应实现代码：

<div class="container">
  <span class="deco"></span>
</div>

.container {
  position: relative;
}
/* 第一层：文字 */
.container::before {
  position: absolute;
  content: "some text";
  top: 10%;
  left: 20%;
  z-index: 3;
}
/* 第二层：黄色边框 */
.container::after {
  position: absolute;
  content: "";
  border: 5px solid yellow;
  width: 50%;
  top: 10%;
  left: 20%;
  z-index: 2;
}
/* 第三层：蓝色边框，放到子标签的伪元素上 */
.deco {
  position: absolute;
  inset: 0;
}
.deco::after {
  position: absolute;
  content: "";
  border: 5px solid blue;
  width: 60%;
  top: 30%;
  left: 50%;
  z-index: 1;
}

方案2：零额外标签实现（适合不想加冗余DOM的场景） #

如果不想修改HTML结构，可以把两个边框效果合并到同一个伪元素的多重box-shadow属性上，文字效果单独用另一个伪元素承载，完全不需要加额外标签。
原理是box-shadow支持同时定义多个阴影层，每个阴影层可以独立设置偏移、尺寸、颜色，把模糊值设为0就能模拟实色边框效果。
对应实现代码：

<div class="container"></div>

.container {
  position: relative;
}
/* 文字层单独用::before */
.container::before {
  position: absolute;
  content: "some text";
  top: 10%;
  left: 20%;
  z-index: 3;
}
/* 两个边框层通过::after本身+box-shadow实现 */
.container::after {
  position: absolute;
  content: "";
  width: 50%;
  height: 100px; /* 按实际边框需要的高度设置 */
  top: 10%;
  left: 20%;
  border: 5px solid yellow;
  z-index: 2;
  /* 计算蓝色边框的偏移和尺寸差：x偏移为两个层的left差值，y偏移为top差值，扩散半径补宽度差 */
  box-shadow: calc(30% - 5px) calc(20% - 5px) 0 calc(5% + 5px) blue;
}

这个方案的缺点是阴影层的尺寸计算相对麻烦，如果装饰层的尺寸、定位逻辑经常调整，维护成本比加空标签的方案高。

注意：目前网上流传的自定义伪元素（比如直接写::deco1、::deco2）方案还没有进入正式CSS标准，仅部分实验性浏览器版本支持，生产环境不建议使用。

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