伪元素::before和::after必须设置content属性才能显示，仅用于装饰性视觉元素，不参与可访问性与SEO，且无法响应事件。
伪元素 ::before 和 ::after 不能用于替换内容，也不能添加可访问的文本；它们只适合装饰性、非语义化的小视觉元素。
伪元素必须带 content 属性才能显示
很多人写了 ::before 却没看到效果，第一反应是“不生效”，其实是因为漏了 content。这个属性是强制的——哪怕你只想画个空心圆点或占位符，也得写 content: ""（空字符串）或 content: " "（空格）。
-
content: ""是最常用写法，生成无内容但可样式化的伪元素 -
content: attr(data-label)可读取元素的 HTML 属性值，但仅限纯文本，不解析 HTML -
content: url(./icon.svg)支持内嵌小图标，注意路径和加载失败时的空白问题 -
content: none或省略content→ 伪元素完全不渲染
::before 和 ::after 的定位与层叠很依赖父容器
它们默认是 inline 级别，且插入在元素内容的最前/最后。想让它当“浮层”或“遮罩”，必须手动设 position: absolute，但前提是父元素有 position: relative（或其他非 static 值），否则会相对于最近的定位祖先偏移，甚至跑到视口外。
- 没加
position: relative到父元素？::after很可能飞到 body 底部或顶部 - 用
z-index控制层级时，父元素必须是定位元素，否则z-index在伪元素上无效 - 想让伪元素撑开父容器高度？不行——它默认不参与文档流，需额外设
display: block+ 尺寸 +position: absolute配合偏移
可访问性与 SEO 场景下别用伪元素放关键信息
屏幕阅读器通常忽略 ::before/::after 里的 content，搜索引擎也不索引。如果你用 ::after 插入“必填”星号、错误提示文字、或者按钮说明，视障用户根本听不到，SEO 也抓不到。
- 表单校验图标 ✅ 可以用
::after，但“请填写邮箱”这类提示必须写在 DOM 里 - 语言切换按钮上的 “EN” / “中文” 标签，不能靠
content: "EN"实现 - 用伪元素模拟 checkbox 或 radio 的选中状态？可以，但真实
input[type="checkbox"]仍需保留并正确绑定
真正容易被忽略的是：伪元素无法响应事件（click、hover 等），除非父元素本身可交互且你把事件绑在父级；另外，某些老版本 Safari 对 content: url() 的 SVG 渲染不稳定，测试时得真机看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
