css 的 content 属性仅支持显式声明的静态或半动态内容，须用 unicode 十六进制转义（如 "\2018"）或 utf-8 字符插入引号，不解析 html 实体；可用 attr() 读取属性值实现条件提示，但不支持字符串拼接与逻辑判断；分隔符推荐 unicode 轻量字符；content 插入内容不可选、不被屏幕阅读器识别、无 seo 价值，关键信息须置于 html 中。
content 属性本身不能“自动识别”引号类型或上下文，它只做静态/半动态内容插入；所有引号、分隔符、提示文本都必须显式声明，且仅通过 ::before 或 ::after 伪元素生效。
插入中文/英文引号：Unicode 转义必须用 \2018 这类格式，不是 ‘
HTML 实体（如 ‘）在 content 中完全无效，CSS 不解析 HTML 实体。只能用 Unicode 十六进制转义，且必须以反斜杠开头、无空格、不加引号包裹（但整个值仍需在外层引号中）：
-
content: "\2018";→ 左单引号 ‘ -
content: "\201C";→ 左双引号 “ -
content: "\201D";→ 右双引号 ” -
content: "「";和content: "」";→ 直接写 UTF-8 字符也行，但需确保 CSS 文件编码为 UTF-8 且服务器响应头正确 - 错误写法：
content: "‘";或content: "‘";（若文件编码非 UTF-8 或未声明，可能乱码）
给链接加“外链”提示：用 attr() 动态读取 href 并拼接文本
纯静态提示（如所有链接后统一加“(外链)”）很简单，但若想区分内外链，就得靠 attr() 提取属性再配合属性选择器判断：
a[href^="http"]:not([href^="https://yourdomain.com"])::after { content: " (外链)"; }-
abbr[title]::after { content: " (" attr(title) ")"; }→ 括号内显示title值，注意空格要手动加在字符串里 - 不能写
content: "(" + attr(title) + ")";—— CSS 不支持字符串拼接运算符 -
attr()读不到自定义属性以外的 DOM 属性（比如textContent），也不能执行逻辑判断
插入分隔符（如竖线、箭头）：优先用 Unicode 字符，慎用图片
分隔符本质是装饰性小符号，用 Unicode 最轻量、最可控：
-
nav a::after { content: "\200B \2759\200B"; }→ 零宽空格 + 中间圆点（•），避免影响换行和对齐 -
.tag::before { content: "→ "; }→ 箭头加空格，比用url()加载 SVG 更快、无请求、无跨域风险 -
content: url(./sep.svg);可行，但路径是相对于 CSS 文件位置，不是 HTML；且 SVG 若含外部引用或 JS，可能被忽略 - 别用
content: " | ";这种带空格的写法来分隔导航项——当父容器white-space: nowrap失效时，空格可能塌陷，建议用\200B或margin控制间距
提示文本不可选、不进无障碍树：关键信息别依赖 content
所有通过 content 插入的内容，浏览器既不把它加入 DOM 树，也不暴露给屏幕阅读器（除非额外加 ARIA 属性，但支持度差）：
- 用户无法复制
p::before { content: "⚠️ 注意："; }中的“⚠️ 注意：” - 搜索引擎不会索引这些文字，SEO 效果为零
- 如果提示涉及操作安全（如“该操作不可撤销”），必须写在 HTML 里，
content只能作视觉补充 - 用
aria-label或aria-describedby替代部分场景，而不是指望content承担语义职责
最易被忽略的一点：伪元素默认是 display: inline，哪怕你写了 content: ""，它仍占一个字符位置；要彻底隐藏又保留清除浮动等功能，得配 visibility: hidden; font-size: 0; 或直接用 content: "" + height: 0; —— 但凡漏掉 content，整个伪元素就失效，连样式都不渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
