利用CSS Content属性与媒体查询实现不同屏幕显示不同文字内容

首先明确一个核心事实：CSS的content属性本身不具备响应式能力。它只能在伪元素里使用，而且值必须是写死的字符串、计数器或者引号，无法像JavaScript那样动态计算，也不能直接在里面嵌套媒体查询。因此，单纯依靠content: "手机版"和content: "桌面版"来让文字随屏幕自适应，这条路是行不通的。真正的解决方案，是让媒体查询来控制伪元素的显示与内容。

为什么你的媒体查询修改了content，却看不到效果？

这个问题很常见，根源往往在于样式覆盖的优先级和细节被忽略。举个例子，假设全局样式里已经这么写了：

.title::before {
  content: "Default";
  display: inline;
}

然后你在媒体查询里只改了content的值，但其他几个关键点没处理好，效果就可能出不来：

• 显示状态被覆盖：如果父元素或者伪元素本身被设置了display: none或visibility: hidden，内容定义得再对也看不见。
• 内容被意外清空：content的值如果被其他样式意外设置为空字符串""或none，内容就没了，而且浏览器不会报错，排查起来很麻烦。
• 布局导致的“消失”：当伪元素没有设置position或float时，如果父容器是Flex或Grid布局，伪元素可能会因为布局计算而被挤出流，或者尺寸塌陷，看起来就像没生效一样。

正确的做法：用媒体查询完整控制伪元素的显示与内容

核心原则就一条：在每个断点下，都明确声明这个尺寸下需要显示什么内容，并确保伪元素是可见的。采用移动优先的写法会更清晰：

.title::before {
  content: "Mobile";
}
@media (min-width: 768px) {
  .title::before {
    content: "Tablet";
  }
}
@media (min-width: 1024px) {
  .title::before {
    content: "Desktop";
  }
}

不过，有几点需要特别注意：

• 别用content硬扛复杂结构：如果不同屏幕下需要的不是简单换词，而是结构都变了（比如要加个图标、或者文案要换行），就别硬塞进content里。它不支持HTML标签，content: "text"只会原样输出这段字符串。这种情况下，用真实的HTML元素配合display属性控制显示隐藏，会更可控。
• 注意兼容性细节：如果需要照顾IE等旧浏览器，避免在content的字符串里使用Unicode emoji或复杂特殊符号，旧引擎解析失败可能导致整个伪元素失效。

进阶方案：用按需加载不同文案的CSS

当文案差异非常大，比如整段的介绍文字需要根据设备完全重写，或者涉及多语言切换时，把所有内容都写进一个CSS文件会显得臃肿。这时，利用标签的media属性来按需加载不同的样式文件，是更合理的架构。

这么做有几个实实在在的好处：

• 按需加载，节省资源：浏览器只会下载并应用当前媒体条件匹配的CSS文件，不匹配的压根不会发起网络请求（在开发者工具的Network面板里都看不到），有效减少了首屏加载的体积。
• 代码分离，易于维护：移动端和桌面端的文案样式可以分开写在不同的文件里，结构清晰，互不干扰。比如在mobile-labels.css里定义触屏相关的提示，在desktop-labels.css里定义键鼠相关的说明。

这里有个小坑要注意：media属性的值最好写成screen and (max-width: ...)这种完整形式。如果只写(max-width: ...)，在一些旧版本的Safari浏览器中可能会被忽略。

最后，提一个容易被忽略但影响体验的细节：修改伪元素的content虽然不会触发DOM重排，但如果你的布局依赖其内容宽度（比如设置了width: max-content），那么不同长度文案的切换就会导致父容器尺寸突然变化，产生视觉上的“抖动”。这种问题在iOS Safari滚动时尤其明显。解决办法要么是给容器固定宽高，要么就放弃伪元素，改用真实的文本节点来实现。