::after不能直接配合text-overflow: ellipsis使用，因为ellipsis是渲染引擎在裁剪时自动插入的非DOM字符，::after无法插入其位置，强行添加会出现在省略号后或被裁掉。
为什么::after不能直接给text-overflow: ellipsis加省略号修饰？
因为text-overflow: ellipsis是浏览器原生机制，它只在元素内容被裁剪时，由渲染引擎自动插入一个「…」字符——这个字符不是 DOM 节点，也不走伪元素流程。::after此时根本插不进那个位置，强行加会出现在省略号**后面**（比如显示成「… »」），或者被裁掉（如果容器太窄）。
用::after实现「末尾修饰符」的正确姿势
必须绕开text-overflow，改用固定宽度 + overflow: hidden + position: relative布局，把文字和::after都放进同一容器，再用绝对定位把修饰符压在右边缘。
-
关键前提：容器需设
position: relative，子元素（如<span>）设position: absolute铺满，文字用white-space: nowrap防换行 -
::after要设content: "»"、position: absolute、right: 0、top: 0，并确保z-index高于文字层 - 文字层需留出足够右内边距（如
padding-right: 16px），否则修饰符会盖住最后一个字
.trunc-wrap {
position: relative;
width: 200px;
overflow: hidden;
}
.trunc-text {
display: inline-block;
white-space: nowrap;
padding-right: 16px;
}
.trunc-wrap::after {
content: "»";
position: absolute;
right: 0;
top: 0;
pointer-events: none;
}
::after修饰符在不同场景下的取舍
它适合明确需要「非省略号符号」或「带交互/样式变化」的末尾标记，但代价是放弃原生text-overflow的语义与可访问性支持（比如屏幕阅读器可能读不出「…」）。
- 适合：后台管理列表项末尾加「→」、卡片标题后加图标、多语言环境里用本地化箭头（如「»」或「›」）
-
不适合：长文本摘要、SEO 敏感区域、需要严格 WCAG 对齐的界面——此时应优先用原生
text-overflow，或 JS 动态截断+插入… - 注意
pointer-events: none必须加，否则::after会拦截文字上的点击事件
移动端和 Flex 布局里的常见翻车点
在display: flex容器里直接套::after修饰符，容易因主轴对齐或收缩行为导致修饰符错位；iOS Safari 对position: absolute在overflow: hidden内的渲染也偶有偏差。
立即学习“前端免费学习笔记（深入）”；
- Flex 容器中，
::after需放在 flex item 内部，而非 flex 容器上（否则会被 flex 规则干扰） - iOS 上建议给
::after加transform: translateZ(0)触发硬件加速，避免闪烁或偏移 - 字体大小缩放（如用户调大系统字号）时，
padding-right值可能不够，推荐用ch单位（如padding-right: 2ch）更鲁棒
