CSS tip: negatieve text-indent in links

6 December 2007, geplaatst in CSS door Davy

Firefox gebruikers weten vast en zeker dat bij het aanklikken van een link er een dotted border rond de link verschijnt.

Als je image-replacement toepast op een link, aan de hand van een negatieve text-indent (Phark methode), dan zie je zo’n border verschijnen over de hele negatieve breedte, zoals op volgende websites:

Corkd

Feedburner

Dit is echter heel simpel te vermijden:

h1 a {
    text-indent: -999em;
    overflow: hidden;
}

De overflow: hidden; zorgt ervoor dat die border slechts beperkt blijft tot het gewenste klikbare gedeelte.