标题：纯CSS替换<legend>标签文本内容的实用技巧

关键词：CSS技巧、legend标签、文本替换、表单样式、前端开发

描述：本文介绍如何通过纯CSS技巧替换HTML表单中<legend>标签的文本内容，实现更灵活的样式控制，同时保持语义化结构。

正文：

在HTML表单设计中，<fieldset>和<legend>是常用的语义化标签，用于分组表单控件并为其添加标题。然而，<legend>的默认样式往往难以满足现代UI设计需求，比如无法直接通过CSS修改其文本内容。本文将分享一种纯CSS技巧，在不改变HTML结构的前提下，灵活替换<legend>的显示文本。

为什么需要替换<legend>文本？

1. 设计一致性：默认的<legend>样式可能与整体设计风格不匹配。
2. 动态内容需求：某些场景下需要根据用户操作动态更新标题，但直接修改DOM可能带来性能开销。
3. 无障碍兼容：保留原始标签的语义化特性，同时优化视觉呈现。

实现方法：伪元素覆盖

通过CSS的伪元素和定位技术，可以覆盖原始文本并显示自定义内容。以下是核心代码：

fieldset {
  position: relative;
  border: 1px solid #ddd;
  padding: 15px;
}

legend {
  position: relative;
  padding: 0 10px;
}

legend::after {
  content: "自定义标题"; /* 替换为需要的文本 */
  position: absolute;
  left: 0;
  top: 0;
  background: white; /* 覆盖原始文本 */
  padding: 0 5px;
}

进阶技巧

1. 动态文本切换：结合CSS变量实现动态内容：

legend::after {
     content: var(--legend-text, "默认标题");
   }

通过JavaScript修改变量值即可更新文本：
document.documentElement.style.setProperty('--legend-text', '新标题')

1. 动画效果：为伪元素添加过渡动画，提升用户体验：

legend::after {
     transition: opacity 0.3s;
   }
   legend:hover::after {
     opacity: 0.8;
   }

注意事项

• 无障碍优化：确保替换后的文本在屏幕阅读器中仍可识别，可通过aria-label补充说明。
• 浏览器兼容性：伪元素方案在主流浏览器中均有效，但需测试旧版本浏览器。
• 语义化保留：此方法仅修改视觉表现，不影响HTML的语义结构。

通过这种CSS技巧，开发者既能保持代码的简洁性，又能实现高度定制化的表单标题效果。相比直接修改DOM的方案，它减少了JavaScript依赖，提升了渲染性能，是表单样式优化的实用选择。