伪元素::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 值），否则会相对于最近的定位祖先偏移，甚至跑到视口外。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 没加
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 渲染不稳定，测试时得真机看。
