伪元素 ::before/::after 必须设置 content 属性才生效，即使为空字符串 content: ""；其值可为字符串、attr()、counter() 或 url()，但不可省略或设为 none。

伪元素 ::before/::after 必须设 content 才生效

没写 content，伪元素就等于不存在——这是最常踩的坑。哪怕只是占位，也得写 content: ""。浏览器根本不关心你有没有样式，只认这个属性是否声明且非 none。

常见错误现象：::before 加了背景色、宽高，但页面完全看不到；检查 computed styles 会发现该伪元素根本没被创建。

• content 值可以是字符串（"✓"）、属性值（attr(data-label)）、计数器（counter(item)）、URL 图片（url(./icon.svg)），但不能是空值或未声明
• 用 url() 插入图片时，无法直接控制尺寸，建议改用 background-image + padding 或 aspect-ratio
• 若需动态内容，优先用 attr() 读取 HTML 属性，而非 JS 注入文本——这样更轻量、可 SSR、无障碍友好

替代 JavaScript 的加载失败提示

不用监听 onerror，也不用 DOM 操作，纯 CSS 就能 fallback 显示错误信息。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

关键点在于把 img 设为 position: relative，再用 ::before 铺底、::after 叠文字：

• img::before 负责灰色背景和虚线边框，模拟占位图视觉结构
• img::after 用 content: attr(alt) 读取原生 alt 文本，居中显示
• 必须加 display: block 或 inline-block，否则伪元素默认 inline 会导致垂直对齐错乱
• 注意：如果图片本身有内联 width/height，伪元素的 100% 才能正确撑满

自定义复选框不依赖 JS 状态同步

原生 <input type="checkbox"> 隐藏后，靠 :checked 伪类 + 相邻兄弟选择器 + 触发 ::before 样式切换，完全无需事件监听。

• 结构必须是 <input><span>文案</span> 或 <label><input><span>文案</span></label>，否则 input:checked + span::before 不匹配
• ::before 画框，input:checked + span::before 改背景色或加 ✓ 图标（可用 content: "✓" 或 SVG data URL）
• 别忘了给 input 加 position: absolute; opacity: 0，既隐藏又保留可访问性
• 移动端点击热区不够大？给 label 加 padding 或 min-height，别只调伪元素大小

排版中控制视觉节奏而非添加内容

伪元素不是“往页面塞文字”的工具，而是微调行内盒模型、悬挂缩进、末行对齐的排版杠杆。

• 实现悬挂缩进：用 ::before { content: ""; width: -2em; float: left; } + 父容器 overflow: hidden
• 段落末尾加分隔符：用 ::after { content: attr(data-separator); display: inline-block; vertical-align: baseline; }，避免破坏基线
• 双引号自动配对：用 open-quote / close-quote 配合 quotes 属性，比硬编码 " 更符合多语言排版规范
• 所有这些操作都不改变 DOM，但会影响 line-height 计算——调试时记得检查 computed styles 中的 line box 高度是否异常

实际项目里最容易被忽略的，是伪元素参与行内格式化上下文（IFC）后引发的基线偏移和换行行为。哪怕 content: ""，它仍是匿名行内盒，会拉高整行 line-height。遇到文字错位或意外折行，第一反应不该是删样式，而是查伪元素的 display 和 vertical-align。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！