img标签是替换元素，无法直接添加::before/::after伪元素；必须用非替换元素（如div）包裹，并设置position:relative、content等才能实现角标、水印等装饰效果。
图片本身不能直接用 ::before / ::after 添加伪元素
因为 <img> 是替换元素（replaced element），它没有可渲染的内部内容流，浏览器不会为它生成伪元素的渲染盒子。你写 img::before 或 img::after，CSS 会静默忽略——不报错，也不生效。
真正能用伪元素的，是包裹 <img> 的容器，比如 <div> 或 <figure>。
- 必须用一个非替换元素作为父容器，且该容器需有内容（哪怕只是空格）或设置
content: ""（对伪元素本身） - 容器需设置
position: relative，方便伪元素绝对定位到图片周围 - 图片建议设为
display: block，避免行内默认的基线对齐导致布局偏移
给图片加角标、水印、边框装饰的典型写法
常见需求如右上角「NEW」标签、居中半透明水印、外发光边框，都靠容器 + ::before/::after 实现。
.img-container {
position: relative;
display: inline-block;
}
.img-container img {
display: block;
max-width: 100%;
}
.img-container::after {
content: "NEW";
position: absolute;
top: 8px;
right: 8px;
background: #ff4757;
color: white;
font-size: 12px;
padding: 2px 6px;
border-radius: 2px;
}
-
content必须声明，否则伪元素不渲染（即使写了其他样式） - 若想叠加多层装饰（如边框+角标），可用
::before做背景层，::after做前景层 - 避免在伪元素里放长文本或复杂布局——它不支持子元素，纯 CSS 装饰优先考虑简洁性
伪元素做遮罩或渐变蒙层时的透明度陷阱
用 ::before 给图片加黑色半透蒙层（常用于文字叠加场景）时，容易误以为设 opacity: 0.5 就够了，但这样会让整个伪元素及其内容（如果有的话）一起变淡，且无法单独控制蒙层颜色与透明度的混合效果。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
background: rgba(0, 0, 0, 0.4)替代opacity，更可控 - 若需渐变蒙层，用
linear-gradient配合透明色：background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.6)) - 注意 z-index：确保伪元素在图片之上但文字仍在最上层，通常设
z-index: 1（伪元素）和z-index: 2（文字）
响应式下伪元素定位失效的根源
当图片宽高随屏幕缩放时，用固定像素（如 top: 10px; right: 10px）定位的角标会脱离预期位置——不是图片动了，而是容器尺寸变了，而伪元素的绝对定位参照的是容器盒模型，不是图片本身。
- 改用相对单位：
top: 5%; right: 5%，但需注意容器高度是否稳定（height: auto下 % 高度可能无效） - 更可靠的方式：用
transform微调，例如top: 0; right: 0; transform: translate(50%, -50%)配合width/max-width控制 - 极端情况（如图片被
object-fit: cover裁剪），伪元素只能锚定容器，无法感知图片实际显示区域——这时应考虑 SVG 图标或 Canvas 合成方案
伪元素本质是样式层，不是 DOM 节点，它不参与图片加载、尺寸计算或事件捕获。所有“贴图”效果，都是视觉欺骗，得从容器布局和定位逻辑出发，而不是指望伪元素理解图片语义。
