如何通过纯CSS替换<legend>标签的文本内容？

嘿，我来帮你搞定这个问题！你之前的两个方案确实都有小问题，我先帮你分析下问题出在哪，再给你一个靠谱的纯CSS解决方案。

先说说你之前方案的问题 #

方案一的问题

你用了visibility: none，但这个属性值是无效的——CSS里visibility的合法值只有visible、hidden和collapse。浏览器会忽略这个错误值，所以原legend文本根本没被隐藏，再加上:before伪元素的内容插在原文本前面，自然就变成了新文本+原文本的效果，而不是替换。

方案二的问题

display: none确实会把原legend彻底移除，但<fieldset>里的legend是个特殊元素——浏览器会专门把它渲染在fieldset边框的缺口位置，而fieldset:before伪元素只是普通的前置子节点，会被放在fieldset的内容区域顶部，没法替代legend的特殊布局位置，所以新文本的位置才会不对。

正确的纯CSS替换方案 #

我们要做的是：保留legend的特殊布局位置，同时隐藏原文本，用伪元素覆盖显示新内容。具体代码如下：

HTML（还是你的原结构）

<fieldset class="fieldset-class">
  <legend>Current address</legend>
  <div class="content">
    some content
  </div>
</fieldset>

CSS

.fieldset-class legend {
  position: relative;
  color: transparent; /* 隐藏原文本，保留元素的占位和特殊布局 */
}

.fieldset-class legend:before {
  content: 'hello'; /* 替换后的新文本 */
  position: absolute;
  left: 0;
  top: 0;
  color: initial; /* 恢复文本颜色，可根据需求自定义 */
}

方案解释 #

1. 给legend设置position: relative，让伪元素可以相对它定位，确保新文本和原文本位置完全重合。
2. color: transparent把原文本变成透明，既隐藏了内容，又保留了legend的原有尺寸和特殊布局位置（不会破坏fieldset边框的缺口结构）。
3. 用:before伪元素生成新文本，通过position: absolute定位到原文本的位置，完美替换。

如果你的legend有自定义的padding、margin或者字体样式，只需要给伪元素同步这些样式即可，确保视觉上完全一致。

内容的提问来源于stack exchange，提问作者physicsboy