How do I hide anchor text without hiding the anchor?

Css

Css Problem Overview


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.

  • Thanks for help so far I have used line-height: 0; and font-size: 0; and text-indent: -999px. But it still shows up some blobs in safari, any ideas?

Css Solutions


Solution 1 - Css

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.

Solution 2 - Css

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).

Solution 3 - Css

a { text-indent:-9999px; }

Tends to work well from my exprience.

Solution 4 - Css

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+.

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.

Visibility: hidden: Didn't allow me to use :after.

text-indent: -9999px;: Also moved the :after element

Solution 5 - Css

text-indent :-9999px 

Works flawlessly.

Solution 6 - Css

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:

<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:

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

Solution 7 - Css

Just need to add font-size: 0; to your element that contains text. This works well.

Solution 8 - Css

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;

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

Solution 9 - Css

Solution 10 - Css

Use this code:

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

Solution 11 - Css

I was able to fix this problem by setting font-size: 0 .

Solution 12 - Css

How about display: none;

That hides anything.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questiongeoffs3310View Question on Stackoverflow
Solution 1 - CssLoktarView Answer on Stackoverflow
Solution 2 - CssscrappedcolaView Answer on Stackoverflow
Solution 3 - CssHuxView Answer on Stackoverflow
Solution 4 - Csscom2ghzView Answer on Stackoverflow
Solution 5 - CssAjeyView Answer on Stackoverflow
Solution 6 - Cssjoeshmoe301View Answer on Stackoverflow
Solution 7 - CssPrajila V PView Answer on Stackoverflow
Solution 8 - CssSimoView Answer on Stackoverflow
Solution 9 - CsselementChaosuView Answer on Stackoverflow
Solution 10 - CssMinhaz AhmedView Answer on Stackoverflow
Solution 11 - CssSangeetha DharmishtanView Answer on Stackoverflow
Solution 12 - Csswebmaster of the universView Answer on Stackoverflow