直接写 img::after 没反应是因为 img 是替换元素，浏览器不为其生成伪元素渲染盒；必须用相对定位的包裹容器，配合 display: block 等设置才能正确显示右下角标签。
::after 本身不能直接给 <img> 或 <button></button> 这类替换元素加右下角标签——必须用包裹容器，且定位逻辑稍有偏差，否则标签会错位或消失。
为什么直接写 img::after 没反应？
因为 <img> 是替换元素（replaced element），浏览器不为它生成伪元素的渲染盒。你写 img::after { content: "NEW"; }，CSS 解析器会静默忽略——不报错、不渲染、也不提示。同理，input、textarea、iframe 都一样。
真正能生效的，是它的父容器，比如一个 <div class="card"><img src="..."></div>。
- 容器必须设
position: relative，否则::after的absolute定位会相对于最近的已定位祖先，可能飞出视口 - 容器内部最好有内容（哪怕只是空格）或显式设置
display: block，避免高度塌陷导致定位基准丢失 -
img建议加display: block，消除行内默认基线对齐带来的底部空白
::after 右下角定位的关键参数组合
右下角 ≠ 简单设 right: 0; bottom: 0。实际常需微调，尤其当容器有 padding 或 border 时。
-
right: 8px和bottom: 8px比0更安全——留出呼吸空间，避免贴边裁剪 - 若标签文字偏小（如“NEW”），用
font-size: 10px+line-height: 1控制高度，再配合padding: 2px 6px保证可点击区域 - 用
transform: translate(50%, 50%)配合right: 0; bottom: 0;可让标签真正锚定在右下角像素点（适合圆形角标） - 务必设
z-index: 1，否则可能被兄弟元素遮挡；但别设太高，避免干扰其他交互层
常见错误：标签被截断或点不到
伪元素默认绘制在内容层之上，但若没控制好层叠上下文，就会出现「看着在，点不中」的情况。
- 容器若用了
overflow: hidden，而标签超出容器边界，会被直接裁掉——改用overflow: visible或扩大容器内边距 - 标签文字用了
pointer-events: none（常见于某些 UI 库重置样式），会导致无法触发 hover 或 click —— 显式写pointer-events: auto - 如果父容器设置了
transform（如 scale、translate），会创建新的层叠上下文，z-index行为可能异常——优先用top/bottom/right/left定位，少依赖 transform 移动 - 打印样式表中
::after默认不显示，需要额外加@media print { .tag::after { content: "[NEW]"; } }才能输出
一个可用的最小可行示例
.image-wrapper {
position: relative;
display: inline-block;
}
.image-wrapper img {
display: block;
}
.image-wrapper::after {
content: "NEW";
position: absolute;
right: 4px;
bottom: 4px;
background: #ff6b6b;
color: white;
font-size: 10px;
line-height: 1;
padding: 2px 6px;
border-radius: 2px;
z-index: 1;
}
注意：right/bottom 值不是固定写死的 0，而是根据实际图标尺寸和留白需求调整；z-index 不要省略，哪怕只有一层装饰。
最易被忽略的其实是容器的 position 和 display 组合——没这两条，后面所有定位都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
