img标签是替换元素，无法直接添加::before/::after伪元素；必须用非替换元素（如div）包裹，并设置position:relative、content等才能实现角标、水印等装饰效果。
图片本身不能直接用 ::before / ::after 添加伪元素
因为 img::before 或 img::after，CSS 会静默忽略——不报错，也不生效。
真正能用伪元素的，是包裹 常见需求如右上角「NEW」标签、居中半透明水印、外发光边框，都靠容器 + 用 立即学习“前端免费学习笔记（深入）”； 当图片宽高随屏幕缩放时，用固定像素（如 伪元素本质是样式层，不是 DOM 节点，它不参与图片加载、尺寸计算或事件捕获。所有“贴图”效果，都是视觉欺骗，得从容器布局和定位逻辑出发，而不是指望伪元素理解图片语义。
content: ""（对伪元素本身）position: relative，方便伪元素绝对定位到图片周围display: block，避免行内默认的基线对齐导致布局偏移给图片加角标、水印、边框装饰的典型写法
::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 做前景层伪元素做遮罩或渐变蒙层时的透明度陷阱
::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: 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 合成方案
