How to hide link information at the bottom left/right of the browser on hover

Question

How can I create a link that doesn\'t show its information at the bottom left or right (this depends on the link\'s position) when you hovering a hyperlink? Lets say that we

Answer 1

It cannot be done with pure html and css. You would have to use javascript for this. Showing the link of an anchor tag is just how most browsers work. Also the user expects to be able to see where he will be redirected.

But it can be done: you can avoid using an anchor tag. Then have another attribute hold the href - like "data-href". Then bind a click event on the a tag that redirects based on this attribute.

I would however, not do this - as I am uncertain if crawlers would see the link.

This is how it can be done, but note that snippets cannot redirect outside SO :)

var aTags = document.querySelectorAll('span[data-href]');

for(var i = 0; i < aTags.length; i++){
    var aTag = aTags[i];
    aTag.addEventListener('click', function(e){
        var ele = e.target;
        window.location.replace(ele.getAttribute('data-href'));
    });    
}

span[data-href]{
    cursor:pointer;
}

test