::before伪元素必须配合content属性才能渲染，否则浏览器直接忽略；父元素需设position:relative提供定位上下文；其内容不可被js操作或seo收录。

::before 伪元素必须配合 content 属性才能渲染，否则浏览器直接忽略——这是所有问题的起点，不是“没生效”，而是根本没生成盒。

为什么写了 ::before 却什么也不显示？

最常见原因是漏了 content，或者写法非法。它不是可选配置，是硬性前提。

• content: "" 是合法且最常用写法，用于纯图形（比如竖线、三角、小圆点），但必须搭配 display: inline-block 或 block 才能设宽高
• content: "★" 要加引号，写成 content: ★（无引号）会失效
• content: attr(data-label) 只读当前元素自身的 data-label 属性，不能跨元素、不能读 class 或 id
• content: none 是非法值，浏览器静默忽略整个伪元素声明

怎么让 ::before 的装饰块精准定位？

想画左竖线、右上角红点、或文字前图标，光写 position: absolute 不够，父元素没定位上下文，伪元素就飘走。

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

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

下载

• 父元素必须设 position: relative（哪怕只是 position: relative; z-index: 0）
• top: 50%; transform: translateY(-50%) 比 top: 0.5em 更可靠，适配不同字体大小
• 要盖在文字上？显式加 z-index: 1；要被遮挡？用 z-index: -1 并确保父元素有 position
• 宽度建议用 px（如 width: 2px），避免缩放时虚化；高度慎用 100vh 这类全局单位

插入图标时容易踩哪些坑？

用 Unicode 或 Font Awesome 都行，但路径、字体、权重缺一不可。

• Unicode 写法必须用 \ 转义，比如 content: "\2713"（✔），不是 content: "✓"（部分字体不支持）
• Font Awesome 图标需同时满足：font-family: "Font Awesome 5 Free" + font-weight: 900 + 正确的 Unicode 码点（如 "\f005"）
• 图标颜色用 color，大小用 font-size，别试图用 background-color 填充 Unicode 字符
• display: inline-block + vertical-align: middle 比单纯 line-height 更稳地对齐文字基线

::before 的内容能被 JS 操作或 SEO 收录吗？

不能。它不在 DOM 中，也不参与语义解析。

• document.querySelector(".foo::before") 返回 null，JS 完全无法访问其内容
• 点击事件无法直接绑定到伪元素上，需要监听父元素，再靠 event.target === event.currentTarget 粗略判断，但不精确
• 搜索引擎和屏幕阅读器都忽略 content 里的文本，关键信息绝不能只靠 ::before 呈现
• 调试时看不到对应节点，得靠浏览器开发者工具的“Styles”面板逐条检查样式是否生效

真正麻烦的从来不是怎么写，而是忘记 content 必须存在、父元素必须定位、以及伪元素天生不可交互——这三个点卡住绝大多数人。

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