能，但需为每个断点手动定义完整伪元素规则并确保互斥；content本身不响应式，仅静态渲染字符串或变量值，变量也须在@media中显式重设，无法自动根据屏幕尺寸计算新内容。
content 属性本身不响应屏幕尺寸变化，它只接受静态字符串或 CSS 变量值，无法根据 @media 查询动态生成不同内容——你写死的 content: "登录"，在手机和桌面端都显示“登录”，除非你手动为每种断点重写规则。
为什么 @media + content 不能自动“响应式替换”？
很多人以为加个媒体查询就能让文字随屏幕变，比如：
.btn::before {
content: "提交";
}
@media (max-width: 768px) {
.btn::before {
content: "发送";
}
}
这确实能生效，但关键在于：这不是“响应式文字替换”，而是**多套硬编码规则的手动覆盖**。它不感知语言、不读取设备特性、不联动用户偏好，纯粹靠开发者提前预设所有断点+文案组合。
- 新增一个屏幕宽度（比如
480px），就得补一条@media规则和对应的content - 改文案时要同步改所有断点下的
content值，漏一处就导致小屏显示旧文案 - 如果按钮同时需支持中英文，还要叠加
[lang="zh-CN"]和[lang="en-US"]，规则爆炸式增长
content 配合 var(--text) 能否真正动态？
可以注入变量，但变量值必须由外部控制——CSS 自身无法根据屏幕尺寸计算出新字符串。例如：
立即学习“前端免费学习笔记（深入）”；
:root {
--btn-text: "提交";
}
@media (max-width: 768px) {
:root {
--btn-text: "发送";
}
}
.btn::before {
content: var(--btn-text);
}
这段代码在现代浏览器里能工作，但它依赖两个前提：
-
:root级变量被正确覆盖（注意层叠顺序，@media必须在:root声明之后） - 没有其他样式（比如 JS 动态设置的
style="--btn-text:xxx"）覆盖掉媒体查询里的赋值 - IE 不支持
var()在content中使用，会直接 fallback 到空内容
真正影响可读性的坑：换行与空格处理
即使你成功让 content 在不同断点显示不同文字，若文字含空格、符号或需折行，渲染可能意外失效：
-
content: "保存 & 退出";中的&在 IE 或 Safari 14 之前会被当作实体解析失败，整个伪元素不渲染 - 想在小屏显示两行文字？
content: "确认\n提交"中的\n是无效的——CSS 不解析转义序列，必须靠white-space: pre-wrap+ 宽度限制 +display: block配合才能折行 - 用
word-break: break-all强制断长单词时，content里的纯文本不会自动触发断行，得额外给伪元素设width和overflow-wrap: break-word
实际项目里，所谓“响应式文字替换”几乎总是服务端或 JS 控制的产物；纯 CSS 路径下，content 只是最后一层视觉输出，它既不决策、也不适配，只忠实地渲染你给它的那个字符串——哪怕这个字符串来自变量，变量值也得你亲手在每个断点里写死。
