如何隐藏Bootstrap stretched-link锚文本且不破坏::after选择器功能？

我用Bootstrap的卡片布局，通过stretched-link类让整个卡片可点击。为了SEO友好，给锚标签加了文本，但这些文本在卡片里显示不合理，想隐藏文本又保留SEO效果。之前用font-size:0的方法，但会破坏stretched-link的::after伪元素功能，求可行的CSS技巧。

以下是stretched-link的原生实现代码：

.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    content: "";
}

可行的CSS解决方案 #

不用font-size:0，改用下面两种方法，既能隐藏文本，又完全不影响stretched-link的点击功能：

• 方法一：文本缩进+溢出隐藏
  给锚标签加自定义类（比如.sr-only-link），通过文本缩进把内容移出可视区域，同时限制元素尺寸：

.sr-only-link {
  position: relative; /* 确保伪元素基于锚标签定位 */
  text-indent: -9999px;
  overflow: hidden;
  display: inline-block;
  width: 1px;
  height: 1px;
}

这种方法不会干扰::after伪元素的绝对定位，伪元素依然能正常覆盖整个卡片容器。

• 方法二：视觉隐藏类（兼容Bootstrap生态）
  直接用Bootstrap内置的sr-only类（如果项目已引入），或者自定义一个完全一致的类：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

把这个类加到锚标签上，文本会被视觉隐藏，但搜索引擎仍能抓取到内容；同时只要卡片容器设置了position: relative（Bootstrap卡片默认已满足），stretched-link的伪元素就能正常覆盖整个卡片。

为什么font-size:0会失效？ #

当给锚标签设置font-size:0时，锚标签的内在尺寸会被压缩到几乎为0。stretched-link::after是绝对定位元素，若锚标签未设置position: relative，伪元素的定位计算会出现异常；即使设置了相对定位，部分浏览器会把尺寸为0的元素视为空容器，导致伪元素无法正常覆盖整个卡片区域，最终破坏点击功能。

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