单个标签能同时用::before和::after，因二者是独立伪元素，分别插入内容前后；需父元素为非替换容器、显式声明content（如""）、合理定位（relative+absolute+transform）避免冲突。
为什么单个标签能同时用 ::before 和 ::after
因为 ::before 和 ::after 是两个独立的伪元素，它们分别插入在元素内容的逻辑“之前”和“之后”，不互相干扰。只要父元素是容器型（如 div、p、span 等），且不是替换元素（如 img、input、iframe），就能同时生效。
必须写全 content，哪怕只是空字符串
两个伪元素都必须显式声明 content，否则完全不渲染。常见错误是漏掉其中一个，或写成 content: none（无效值）或直接省略。
-
content: ""是最常用的安全写法，表示插入空内容但保留伪元素节点 -
content: attr(data-label)可读取自定义属性值，适合动态文本 -
content: url("icon.svg")可内联小图标，但注意 IE8 不支持 - 不能写
content: unset或content: initial，这些不会触发渲染
定位冲突时要用 position + z-index 显式控制层叠
默认两者都是 display: inline，会随文本流排布；一旦用 absolute 定位，就容易重叠或错位。
- 父元素需设
position: relative，作为absolute伪元素的定位上下文 - 若两个伪元素都绝对定位，用
z-index明确谁在上层（例如图标在前、角标在后） - 避免同时用
top: 0+bottom: 0这类冲突偏移，浏览器行为不一致 - 用
transform: translate()替代大数值left/right更利于性能
实际可复用的双伪元素组合模式
以下写法经测试在 Chrome 120+、Firefox 125+、Safari 17+ 中稳定运行：
.tag {
position: relative;
display: inline-block;
padding: 4px 12px;
}
.tag::before {
content: "#";
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
color: #666;
}
.tag::after {
content: "";
position: absolute;
right: -6px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 8px;
height: 8px;
background: #007bff;
}
这个例子中：::before 插入前置符号，::after 绘制右上角小方块——二者共存且互不遮挡。关键点在于：父元素有 relative，两个伪元素各自用 transform 居中，且没共享同一方向的偏移量。
真正容易被忽略的是：伪元素不参与文档流，但它们的盒模型仍受 box-sizing、font-size、line-height 影响；如果父元素 font-size: 0，又没给伪元素单独设字号，文字内容可能塌缩不可见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
