如何隐藏span标签内指定文本而不影响其中的a标签元素

方案一：父元素设font-size:0，重置子元素字体大小 #

这是最简洁的方法，利用父元素字体大小为0时文本节点会被隐藏的特性，同时单独恢复a标签的正常字体大小：

.tagged_as {
  font-size: 0;
}
.tagged_as a {
  font-size: 16px; /* 替换成你页面实际使用的字体大小 */
  margin-right: 8px; /* 可选：调整链接之间的间距，匹配原布局 */
}

解释：父元素.tagged_as设置font-size:0后，里面的“Tag :”文本节点会消失且不占空间；给a标签单独设置字体大小，就能让链接正常显示，还可以通过margin调整链接之间的分隔间距，还原原布局效果。

方案二：利用文本缩进隐藏文本，偏移链接位置 #

如果不想修改字体大小，可以用文本缩进把“Tag :”移出可视区域，再把a标签移回正常位置：

.tagged_as {
  text-indent: -9999px;
}
.tagged_as a {
  display: inline-block;
  text-indent: 0;
  margin-left: 9999px;
}

解释：父元素的text-indent: -9999px会把所有内容向左移出屏幕，给a标签设display: inline-block后重置text-indent，再用margin-left把链接拉回原位置。

内容的提问来源于stack exchange，提问作者Amélie F