Menu
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.
line-height: 0; and font-size: 0; and text-indent: -999px. But it still shows up some blobs in safari, any ideas?
429
To disable a HTML anchor element with CSS, we can apply the pointer-events: none style. pointer-events: none will disable all click events on the anchor element. This is a great option when you only have access to class or style attributes. It can even be used to disable all the HTML links on a page.
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).
visibility:hidden , color:transparent and text-indent will do this. the font-size:0 option will work better I think. It should be remembered that some of these solutions will only hide the text. They will still leave a space for it on the screen.
You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid. A hidden <span> element is not visible, but it maintains its position on the page. Removing the hidden attribute makes it re-appear.
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.
79
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).
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
