CSS 如何隐藏锚文本而不隐藏锚
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5300714/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how do i hide anchor text without hiding the anchor
提问by geoffs3310
say I have the following markup:
说我有以下标记：
<li><a href="somehwere">Link text</a></li>
If i have a background image on the a tag how would I hide the link text using just css? font-size:0 seems to work fine on the a tag apart from in ie7 little blobs show.
如果我在 a 标签上有背景图片，我将如何仅使用 css 隐藏链接文本？font-size:0 似乎在 a 标签上工作正常，除了在 ie7 小 blob 显示中。
Thanks
谢谢
- Thanks for help so far iv used line-height: 0; and font-size:0; and text-indent: -999px; but it still shows up some blobs in safari, any ideas?
- 感谢到目前为止的帮助 iv 使用 line-height: 0; 和字体大小：0; 和文本缩进：-999px；但它仍然在 safari 中显示一些斑点，有什么想法吗？
回答by Loktar
Try
尝试
a{
line-height: 0;
font-size: 0;
color: transparent;
}
The color: transparent;covers an issue with Webkit browsers still displaying 1px of the text.
该color: transparent;盖与WebKit的问题，浏览器仍显示文本的1px的。
回答by scrappedcola
Wrap the text in a span and set visibility:hidden;Visibility hidden will hide the element but it will still take up the same space on the page (conversely display: none removes it from the page as well).
将文本包裹在一个 span 中并设置visibility:hidden;Visibility hidden 将隐藏该元素，但它仍然会占用页面上的相同空间（相反， display: none 也会将其从页面中删除）。
回答by Hux
a { text-indent:-9999px; }
Tends to work well from my exprience.
从我的经验来看，效果很好。
回答by com2ghz
Mini tip:
小贴士：
I had the following scenario:
我有以下场景：
<a href="/page/">My link text
:after
</a>
I hided the text with font-size: 0, so I could use a FontAwesome icon for it. This worked on Chrome 36, Firefox 31 and IE9+.
我用 font-size: 0 隐藏了文本，所以我可以为它使用 FontAwesome 图标。这适用于 Chrome 36、Firefox 31 和 IE9+。
I wouldn't recommend color: transparent because the text stil exists and is selectable. Using line-height: 0px didn't allow me to use :after. Maybe because my element was a inline-block.
我不推荐 color: transparent 因为文本仍然存在并且是可选的。使用 line-height: 0px 不允许我使用 :after。也许是因为我的元素是一个内联块。
Visibility: hidden: Didn't allow me to use :after.
可见性：隐藏：不允许我使用：之后。
text-indent: -9999px;: Also moved the :after element
文本缩进：-9999px；: 还移动了 :after 元素
回答by Ajey
text-indent :-9999px
Works flawlessly.
完美运行。
回答by joeshmoe301
Another option is to hide based on bootstraps "sr-only" class. If you wrap the text in a span with the class "sr-only" then the text will not be displayed, but screen readers will still have access to it. So you would have:
另一种选择是基于引导程序“sr-only”类隐藏。如果您使用“sr-only”类将文本包装在一个跨度中，那么文本将不会显示，但屏幕阅读器仍然可以访问它。所以你会有：
<li><a href="somehwere"><span class="sr-only">Link text</span></a></li>
If you are not using bootstrap, still keep the above, but also add the below css to define the "sr-only" class:
如果你不使用 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; }
回答by Prajila V P
Just need to add font-size: 0;to your element that contains text.
This works well.
只需要添加font-size: 0;到包含文本的元素。这很好用。
回答by Simo
I have followed the best answer of Loktar and it worked very well. The only problem I had was with Chrome (my current version is 27.0.1453.94 m). The problem I had was that it seems Chrome is aware that the text in the link is not visible and it puts the link a little bit lower then it is supposed to be (something like margin-top, but it is not possible to change it). This happens with all the ways in which we make the text invisible: - line-height: 0; - font-size: 0; - text-indent:-9999px;
我遵循了 Loktar 的最佳答案，并且效果很好。我遇到的唯一问题是 Chrome（我当前的版本是 27.0.1453.94 m）。我遇到的问题是，Chrome 似乎意识到链接中的文本不可见，并且将链接放得比预期的要低一点（类似于 margin-top，但无法更改它） ）。这发生在我们使文本不可见的所有方式中： - line-height: 0; - 字体大小：0；- 文本缩进：-9999px；
I was able to fix this problem by adjusting the vertical-align of the link like this:
我能够通过像这样调整链接的垂直对齐来解决这个问题：
vertical-align: 25px;
I hope this is helpful
我希望这是有帮助的
回答by elementChaosu
You can put an image into ::before pseudoelement and set the same dimensions for as is the image + add overflow:hidden, like:
您可以将图像放入 ::before 伪元素并设置与图像相同的尺寸+添加溢出：隐藏，例如：
li a::before{
content:url('img');
width:20px;
height:10px
}
a {
overflow:hidden;
width:20px;
height:10px
}
回答by Sangeetha Dharmishtan
I was able to fix this problem by setting font-size: 0 .
我能够通过设置font-size: 0来解决这个问题。
