能否用CSS在classList.toggle切换类时修改元素内容？

阿华AIGC实验室

2026-5-11

是否存在CSS方式在执行classList.toggle时修改元素内容？

首先直接说结论：纯CSS不借助伪元素的话，没办法直接修改元素的文本内容——因为CSS的content属性只对伪元素（:before/:after）生效，普通元素上设置content不会有任何效果，这就是你原来的代码没起作用的原因。

如果你希望把文本内容保留在HTML结构里，而不是用伪元素生成，这里有个可行的方案：把两种状态的文本都写在HTML里，通过CSS根据类来控制它们的显示/隐藏：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
/* 默认显示完整文本，隐藏短文本 */
#so .short-text {
  display: none;
}
/* 切换到collapsed类时，隐藏完整文本，显示短文本 */
#so.collapsed .full-text {
  display: none;
}
#so.collapsed .short-text {
  display: inline;
}
#so.collapsed {
  border:1px solid red;
}
</style>
</head>
<body>
<div id="so">
  <span class="full-text">StackOverflow</span>
  <span class="short-text">SO</span>
</div>
<button id="btn">Click Me</button>
<script>
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
  document.getElementById('so').classList.toggle("collapsed");
});
</script>
</body>
</html>

这个方案的逻辑很简单：