CODEWITHSUNDEEP
css
geoffs3310
geoffs3310

Reputation: 14008

How do I hide anchor text without hiding the anchor?

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.

Upvotes: 82

Views: 119494

Answers (12)

Minhaz Ahmed
Minhaz Ahmed

Reputation: 35

Use this code:

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

Upvotes: 0

elementChaosu
elementChaosu

Reputation: 11

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
}

Upvotes: 1

Sangeetha Dharmishtan
Sangeetha Dharmishtan

Reputation: 11

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

Upvotes: 0

Prajila V P
Prajila V P

Reputation: 5337

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

Upvotes: 3

joeshmoe301
joeshmoe301

Reputation: 1428

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

Upvotes: 3

com2ghz
com2ghz

Reputation: 2876

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

Upvotes: 6

webmaster of the univers
webmaster of the univers

Reputation: 11

How about display: none;

That hides anything.

Upvotes: -5

Ajey
Ajey

Reputation: 8222

text-indent :-9999px

Works flawlessly.

Upvotes: 5

Simo
Simo

Reputation: 21

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

Upvotes: 2

Loktar
Loktar

Reputation: 35319

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.

Upvotes: 213

scrappedcola
scrappedcola

Reputation: 10572

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

Upvotes: 19

Hux
Hux

Reputation: 3122

a { text-indent:-9999px; }

Tends to work well from my exprience.

Upvotes: 17

Related Questions