如何使用CSS实现文本替换 将Type：替换为Class：

针对给定HTML结构，无需改动任何原有HTML代码与a标签内容，仅通过CSS即可实现开头Type：到Class：的视觉替换，不影响后续链接的点击功能与原有排版。

实现代码 #

适配的原HTML结构：

<span class="skills">Type：<a href="....../type/aaa/">aaa</a>, <a href="...../type/bbb/">bbb</a></span>

需要添加的CSS代码：

.skills {
  display: inline-block;
  position: relative;
  /* 预留替换文本的位置，数值可根据实际字体微调 */
  padding-left: 5.5ch;
  /* 将开头原文本向左移出可视区域 */
  text-indent: -5.5ch;
  overflow: hidden;
}
.skills::before {
  /* 插入替换后的目标文本 */
  content: "Class：";
  position: absolute;
  left: 0;
  top: 0;
  width: 5.5ch;
  /* 重置伪元素缩进，避免继承父级负缩进导致文本移位 */
  text-indent: 0;
}

实现原理 #

• 将.skills设置为行内块元素，保留原有行内排版特性的同时，支持溢出隐藏、相对定位能力，不会破坏元素和周边内容的排版关系
• 负文本缩进仅作用于行首内容，刚好把开头的Type：移出内容可视区，配合overflow: hidden隐藏原文本；后续的a标签、间隔逗号都处于正常文档流中，位置、功能完全不受影响
• 通过::before伪元素在容器左侧预留的padding区域插入替换文本，和后续内容的间距、对齐效果和原文本一致

注意事项 #

• 代码中5.5ch是适配常规无衬线字体的宽度值，如果实际使用的是宽幅差异较大的字体，微调这个数值即可，保证原文本完全隐藏、新文本和后续内容无重叠
• 该方案不依赖页面背景色，适配透明、渐变、图片背景等各类场景，不会出现替换块和背景不协调的问题

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