How do I hide anchor text without hiding the anchor

Question

Say I have the following markup   lt li gt  lt a href  quot somehwere quot  gt Link text lt  a gt  lt  li gt   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

User · Answer

Use this code   lt div class  quot hidden quot  gt  lt li gt  lt a href  quot somehwere quot  gt Link text lt  a gt  lt  li gt  lt  div gt

User · Answer

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

User · Answer

Mini tip   I had the following scenario    lt a href   page   gt My link text  after  lt  a gt    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

User · Answer

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

User · Answer

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

User · Answer

a   text-indent -9999px      Tends to work well from my exprience

User · Answer

You can put an image into   before pseudoelement and set the same  dimensions for  as is the image   add overflow hidden  like   li a  before    content url  img      width 20px    height 10px    a     overflow hidden    width 20px    height 10px

User · Answer

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    lt li gt  lt a href  somehwere  gt  lt span class  sr-only  gt Link text lt  span gt  lt  a gt  lt  li gt    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

User · Answer

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

User · Answer

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

User · Answer

How about display  none   That hides anything

User · Answer

text-indent  -9999px    Works flawlessly

[css] How do I hide anchor text without hiding the anchor?

Examples related to css