How do I hide anchor text without hiding the anchor?

Question

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?

score 206 · Accepted Answer · edited Nov 17 '11 at 01:23

206

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.

edited Nov 17 '11 at 01:23

Brock Adams

90,639
22
233
295

answered Mar 14 '11 at 15:30

Loktar

34,764
7
90
104

1

I have found this not to work in Chrome 15.0.874.120. Also have to add color:transparent; – Lou Groshek Nov 17 '11 at 00:12
@brokenindexfinger weird... but adding color:transparent works then? If so feel free to edit my answer and add that, or I can. – Loktar Nov 17 '11 at 00:14
Adding `cursor: default;` can be useful too. – Justin D. Jun 13 '13 at 00:46
Seems great but it's hiding :before & :after too :/ – gordie Apr 05 '16 at 12:18

score 20 · Answer 2 · answered Mar 14 '11 at 15:45

20

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

answered Mar 14 '11 at 15:45

scrappedcola

10,423
1
32
43

this is the proper solution, but I used display: none to also remove all sizing. – christopher_h Jan 09 '18 at 17:16

score 17 · Answer 3 · answered Mar 14 '11 at 15:33

17

a { text-indent:-9999px; }

Tends to work well from my exprience.

answered Mar 14 '11 at 15:33

Hux

3,102
1
26
33

Ah nice didn't even think of that, I use that all the time for headers with images. – Loktar Mar 14 '11 at 15:35
8

You may receive a performance hit by Google because you are telling the browser to draw a box at a width of 9999px, for each element that it is applied too. Personally speaking, you are better off applying a display:none, visibility:hidden, font-size:0, or something to that effect to avoid the "possibility" of Google not respecting your over-extended layout scheme. I use to code that way too, but I stopped. source - http://stackoverflow.com/questions/8971152/is-text-indent-9999px-a-bad-technique-for-replacing-text-with-images-and-what – klewis Jul 16 '13 at 11:15
2

this also breaks `outline` on firefox. The outline rectangle will start from the left of browser viewport. – Mariusz Pawelski Nov 22 '18 at 20:38

com2ghz · Answer 4 · 2014-07-30T08:17:54.637

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

score 5 · Answer 5 · edited Oct 12 '13 at 21:38

5

text-indent :-9999px

Works flawlessly.

edited Oct 12 '13 at 21:38

Marcel Gwerder

8,353
5
35
60

answered Oct 12 '13 at 21:16

Ajey

7,924
12
62
86

score 3 · Answer 6 · answered May 13 '16 at 18:56

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; }

score 3 · Answer 7 · answered Mar 01 '17 at 12:14

3

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

answered Mar 01 '17 at 12:14

Prajila V P

5,027
2
23
36

score 1 · Answer 8 · edited May 29 '13 at 22:49

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

score 1 · Answer 9 · answered Oct 23 '19 at 21:57

1

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
}

answered Oct 23 '19 at 21:57

elementChaosu

11
1

score 0 · Answer 10 · answered Feb 27 '21 at 14:36

0

Use this code:

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

answered Feb 27 '21 at 14:36

Minhaz Ahmed

25
3

score -1 · Answer 11 · answered Mar 30 '17 at 13:10

-1

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

answered Mar 30 '17 at 13:10

Sangeetha Dharmishtan

1
1

score -5 · Answer 12 · edited Apr 12 '14 at 15:23

-5

How about display: none;

That hides anything.

edited Apr 12 '14 at 15:23

StarsSky

6,721
6
38
63

answered Sep 06 '13 at 17:51

webmaster of the univers

11

How do I hide anchor text without hiding the anchor?

12 Answers12

Linked

Related