::after 是伪元素而非伪类，必须设置 content: "" 才能渲染；通过 border 技巧、transform 和绝对定位可绘制三角形、圆点、菱形、飘带等形状，但依赖父容器 position: relative 且需精准计算尺寸与偏移。
::after 本身不是伪类，是伪元素；它不能“添加伪类形状”，但能通过样式组合画出三角形、圆点、箭头等形状——关键在 border 技巧、transform 和定位配合。
为什么 content: "" 是硬性前提
没写 content，::after 根本不渲染，无论你设了多高的 width、多炫的 background 都白搭。常见错误是只写 display: block 就以为够了。
-
content: ""是最低要求，哪怕空字符串也得显式声明 - 想插入 Unicode 图标（比如
"\2713"）或属性值（比如attr(data-label)），也必须走content路径 - 用
content: " "（空格）也能触发，但不如""干净，还可能因字体导致高度浮动
画三角形：border hack 的参数怎么配
纯 CSS 画三角形靠的是边框颜色和透明度的不对称设置，本质是让三边透明、一边有色，形成视觉尖角。错配 border 宽度或方向，三角就歪或消失。
- 要朝右的三角：设
border-left: 6px solid #333，其余三边为transparent - 要朝下的三角：用
border-top: 6px solid #333，其他为transparent - 底边长度 = border-width × 2，高 = border-width；所以
border-width: 8px生成的是 16px 底边、8px 高的等腰直角三角 - 定位时注意：三角形的“顶点”落在 border 相交处，
top/left值要扣掉 border 宽度才对齐，比如想让朝下三角底部贴父元素底边，bottom得设-8px，不是0
圆点、菱形、飘带这些非三角图形怎么搞
三角靠 border，圆点靠 border-radius，菱形靠 transform: rotate(45deg)，飘带靠斜切 + 定位 —— 每种都依赖 position: absolute 和父容器的 position: relative。
立即学习“前端免费学习笔记（深入）”；
- 圆点：设
width和height相等，再加border-radius: 50%；top: 50%+transform: translateY(-50%)居中更稳 - 菱形：一个正方形
::after，width: 12px、height: 12px，然后transform: rotate(45deg)，背景色填满即可 - 飘带（如 “New” 斜标）：宽高不等的矩形 +
transform: skewX(-20deg)或rotate(-15deg)，z-index: 1确保压在内容上 - 所有这类图形，父元素漏掉
position: relative，::after就会相对于body定位，飘到屏幕角落去
动画和响应式下容易失效的点
给 ::after 加 transition 或 @keyframes 很常见，但几个细节一错就动不了。
- 动画属性必须可过渡：
width、opacity、transform行，display、content不行 - 用
transform: translateX(-50%)居中三角时，缩放页面或高 DPI 屏幕下偏移量会失准；改用left: calc(50% - 6px)（6px 是三角底边一半）更可靠 - 响应式场景下，如果三角尺寸用固定 px，小屏可能撑出容器；建议用
em或配合clamp()控制范围 - 伪元素内容不可被屏幕阅读器识别，别把关键状态（如“必填”“错误”）只塞进
::after里
真正麻烦的不是画出形状，而是让它始终待在该待的位置——父容器定位、border 计算、transform 基准点、缩放适配，四者缺一不可。漏掉任何一个，图形就“飘”了。
