如何隐藏锚文本而不隐藏锚

说我有以下标记：

<li><a href="somehwere">Link text</a></li>

如果标签上有背景图片，我如何仅使用CSS隐藏链接文本？除了在ie7小斑点显示中之外，font-size：0似乎在a标签上可以正常工作。

谢谢

• 到目前为止，谢谢您的帮助。iv使用line-height：0; 和font-size：0; 和文本缩进：-999px；但它仍然在野生动物园中出现了一些斑点，有什么想法吗？

尝试

 a{
    line-height: 0; 
    font-size: 0;
    color: transparent; 
 }

该color: transparent;盖与WebKit的问题，浏览器仍显示文本的1px的。

将文本环绕在一个范围内，并将“visibility:hidden;可见性”设置为隐藏将隐藏该元素，但它仍将占据页面上的相同空间（相反显示：也不会从页面上将其删除）。

a { text-indent:-9999px; }

根据我的经验，我倾向于工作得很好。

迷你提示：

我有以下情况：

<a href="/page/">My link text
:after
</a>

我用font-size：0隐藏了文本，因此可以使用FontAwesome图标。这适用于Chrome 36，Firefox 31和IE9 +。

我不建议使用颜色：透明，因为文本stil存在并且可以选择。使用line-height：0px不允许我使用：after。也许是因为我的元素是内联块。

可见性：隐藏：不允许我使用：after。

文字缩进：-9999px；：还移动了：after元素

text-indent :-9999px 

完美地工作。

另一种选择是基于引导程序“仅sr”类隐藏。如果使用“仅sr”类将文本包装在跨度中，则不会显示该文本，但是屏幕阅读器仍可以访问它。因此，您将拥有：

<li><a href="somehwere"><span class="sr-only">Link text</span></a></li>

如果您不使用引导程序，则仍然保留上面的内容，还要添加下面的css来定义“仅sr”类：

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

我遵循了Loktar的最佳答案，并且效果很好。我唯一遇到的问题是Chrome（我的当前版本是27.0.1453.94 m）。我遇到的问题是，Chrome似乎意识到链接中的文本不可见，并且将链接的位置降低了一些，比预期的要低一些（类似于margin-top，但是无法更改它）。这使我们使文本不可见的所有方式都发生：-line-height：0; -字体大小：0；-文字缩进：-9999px；

我可以通过调整链接的垂直对齐来解决此问题，如下所示：

vertical-align: 25px;

我希望这是有帮助的

只需添加font-size: 0;到包含文本的元素即可。这很好。

您可以将图像放入:: before伪元素中，并为图像设置相同的尺寸+添加overflow：hidden，例如：

li a::before{
  content:url('img');
  width:20px;
  height:10px
}

a {
  overflow:hidden;
  width:20px;
  height:10px
}

我可以通过设置font-size：0来解决此问题。

怎么样 display: none;

隐藏任何东西。