CSS伪元素打造图片装饰效果

• 必须用一个非替换元素作为父容器，且该容器需有内容（哪怕只是空格）或设置 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 节点，它不参与图片加载、尺寸计算或事件捕获。所有“贴图”效果，都是视觉欺骗，得从容器布局和定位逻辑出发，而不是指望伪元素理解图片语义。

今天关于《CSS伪元素打造图片装饰效果》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！