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

假设我有以下标记:

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

如果我有一个背景图像的标签，我如何隐藏链接文本只使用 css？Font-size: 0除了 ie7 little blobs show 之外，似乎可以很好地工作在 a 标记上。

  • 感谢帮助，迄今为止我已经使用 line-height: 0;和 font-size: 0;和 text-indent: -999px。但在狩猎中还是会出现一些斑点，有什么想法吗？
113036 次浏览
小开
最佳答案

试试看

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


color: transparent;解决了 Webkit 浏览器仍然显示1px 文本的问题。

小开 
a { text-indent:-9999px; }

从我的经验来看，这个方法很有效。

小开

将文本包装在一个 span 中并设置 visibility:hidden;隐藏元素，但是它仍然会占用页面上的相同空间(相反的显示: 也不会从页面中删除它)。

小开

我遵循了 Loktar 的最佳答案，效果非常好。我唯一的问题是 Chrome (我现在的版本是27.0.1453.94 m)。 我遇到的问题是，Chrome 似乎意识到链接中的文本是不可见的，它把链接放得比应该的要低一些(比如页边距，但是不可能改变它)。 这种情况发生在我们使文本不可见的所有方式上: - 线高: 0; - 字型-大小: 0; - 文本缩进:-9999px;

我可以通过调整链接的垂直对齐来解决这个问题:

vertical-align: 25px;

我希望这能有所帮助

小开

display: none;呢

能隐藏一切。

小开 
text-indent :-9999px

完美无瑕。

小开

小贴士:

我设想了以下场景:

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

我隐藏了字体大小: 0的文本，所以我可以使用 FontAwesome 图标。这在 Chrome 36、 Firefox 31和 IE9 + 上都可以使用。

我不建议使用颜色: 透明，因为文本仍然存在并且是可选的。 使用 line-height: 0px 不允许我使用: after。也许是因为我的元素是一个 inline-block。

可见度: 隐藏 : 不允许我使用: 之后。

Text-indent: -9999 px; : 还移动了: after 元素

小开

另一种选择是基于引导程序“ sr-only”类进行隐藏。如果您使用类“ sr-only”将文本包装在一个范围内，那么文本将不会显示，但屏幕阅读器仍然可以访问它。所以你会:

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

如果您不使用 bootstrap，仍然保留上面的代码，但是也可以添加下面的 css 来定义“ sr-only”类:

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

只需要将 font-size: 0;添加到包含文本的元素中。 效果不错。

小开

我可以通过设置 Font-size: 0字体大小: 0来解决这个问题。

小开

您可以将一个图像放入: : before 伪元素中，并设置与图像相同的尺寸 + add overflow: hide，如:

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


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

使用以下代码:

<div class="hidden"><li><a href="somehwere">Link text</a></li></div>

提交答案