不修改HTML，如何用CSS隐藏<a>标签内文本仅保留<img>标签？

问题描述 #

给定以下不可修改的HTML结构：

<a href="https://www.example.com/page">
    <img src="images/example.jpg" width="50" />
    This is a link
</a>

需求：保留<img>标签正常显示，仅隐藏<a>标签内的文本内容“This is a link”，且禁止对HTML进行任何修改。

可行CSS方案 #

方案1：利用font-size清零 #

通过将父元素<a>的字体大小设为0直接隐藏文本，再重置图片的字体大小（避免继承影响，实际图片不受字体大小影响，此步骤可选）：

a {
  font-size: 0;
}
/* 可选：重置图片的字体大小，确保后续若有相关样式不被影响 */
a img {
  font-size: 16px;
}

方案2：文本缩进+溢出隐藏 #

将<a>设为行内块元素，通过大比例文本缩进配合溢出隐藏，把文本移出可视区域，同时重置图片的相关属性：

a {
  display: inline-block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}
a img {
  text-indent: 0;
  white-space: normal;
  display: block; /* 可选：消除图片下方默认的空白间隙 */
}

方案3：绝对定位覆盖文本 #

通过伪元素生成与背景色一致的覆盖层遮挡文本，同时提升图片层级确保正常显示：

a {
  position: relative;
  display: inline-block;
}
a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* 需与页面背景色保持一致 */
  z-index: 1;
}
a img {
  position: relative;
  z-index: 2;
}

注意：方案3需确保background-color与页面背景色完全匹配，否则会出现色块突兀的问题。

内容的提问来源于stack exchange，提问作者Teshan N.