CSS content属性无法响应屏幕尺寸变化，必须配合媒体查询控制伪元素显隐；常见失效原因包括样式覆盖、display/visibility隐藏、空content值及布局塌陷；推荐移动优先写法并注意兼容性与布局抖动问题。
CSS content 属性本身不能直接响应屏幕尺寸变化——它只在伪元素（::before、::after）中生效，且值必须是静态字符串、计数器或引号，不支持 JS 式动态计算或媒体查询嵌套。 想靠 content: "手机版" 在小屏显示、content: "桌面版" 在大屏显示？单靠 content 本身做不到，必须配合媒体查询 + 伪元素显隐控制。
为什么直接写 @media (max-width: 768px) { .title::before { content: "Mobile"; } } 有时不生效
常见错误是忽略默认样式覆盖逻辑。比如全局已定义：
.title::before {
content: "Default";
display: inline;
}
然后在媒体查询里只改 content，但没处理其他可能冲突的属性：
-
display: none或visibility: hidden在父级或自身上被继承/设置过，导致伪元素根本不可见 -
content值为空字符串（""）或none，会清空内容但不报错，容易误判为“没生效” - 伪元素未设置
position或float时，若父容器是flex或grid，可能被挤出流或尺寸塌陷，看起来像消失
正确做法：用媒体查询切换整个伪元素的 content 和 display
核心原则：每个断点下，明确声明该尺寸需要显示的内容，并确保伪元素可见。推荐移动优先写法：
立即学习“前端免费学习笔记（深入）”；
.title::before {
content: "Mobile";
}
@media (min-width: 768px) {
.title::before {
content: "Tablet";
}
}
@media (min-width: 1024px) {
.title::before {
content: "Desktop";
}
}
但要注意：
- 如果不同断点下需要完全不同的文案结构（比如加图标、换行），别硬塞进
content，改用真实 HTML 元素 +display控制更可控 -
content中不能插入 HTML 标签，content: "<span>text</span>"会原样输出字符串，不是渲染标签 - 若需兼容 IE，
content的字符串值不要含 Unicode emoji 或特殊符号，部分旧引擎解析失败后整个伪元素失效
替代方案：<link media> 加载不同文案 CSS 文件
当文案差异极大（如整段介绍文字、多语言切换），用 <link> 的 media 属性按需加载更合理：
<link rel="stylesheet" href="mobile-labels.css" media="screen and (max-width: 767px)"> <link rel="stylesheet" href="desktop-labels.css" media="screen and (min-width: 768px)">
这样做的实际效果是：
- 不匹配的 CSS 文件根本不会发起网络请求（DevTools Network 面板里看不到）
- 避免把所有文案都打包进主 CSS，减少首屏体积
- 每份 CSS 可独立维护，比如
mobile-labels.css里写.label::before { content: "触控优化"; }，desktop-labels.css写.label::before { content: "键盘+鼠标支持"; }
注意：media 值必须带 screen and 前缀，写成 media="(max-width: 767px)" 在旧版 Safari 里会被忽略。
真正容易被忽略的是：伪元素的 content 修改不会触发 DOM 重排，但若依赖其宽度做布局（比如 width: max-content），不同文案长度会导致父容器尺寸跳变——这种视觉抖动在 iOS Safari 滚动时尤其明显。要么固定宽高，要么改用真实文本节点。
