Lepší podtržení odkazu

Odkazy na webových stránkách je většinou vhodné podtrhávat. Standardní podtržení vlastností text-decoration ale nenabízí příliš možností upravení vzhledu.

S podtržením vytvořeným pomocí text-decoration: underline není v podstatě možné nic moc dále dělat.

Řešení je tuto dekoraci vypnout a podtržení si zajistit po svém.

Vlastní podtržení

Existuje spousta možností, jak vlastní podtržení realisovat, například:

1. Rámečkem pod odkazem – border-bottom.

   a {
     text-decoration: none;
     border-bottom: 1px solid;
   }

   Bez uvedení barvy se použije aktuální barva. Ukázka.

2. Stínem box-shadow (IE 9+). Ukázka.

3. Podtržení vytvořit obrázkem na pozadí. Nemusí se jednat o skutečný obrázek – jde použít i gradient.

4. Pseudo-elementem :before/:after, který se absolutně naposicuje podle odkazu. Problém tohoto řešení bude s delšími odkazy, které by se rozdělily na dva řádky. Bude nutné zakázat jejich zalamovaní.

Přeškrtnutí písmen

Ne úplně hezky může působit skutečnost, že podtržení přeškrtává písmena, která sahají pod úroveň řádku.

Vyřešit tuto situaci jde přidáním stínu textu v barvě pozadí, který podtržení překryje.

a {
  text-shadow: 2px 0 #fff, -2px 0 #fff;
}

Toto řešení půjde použít pouze v případě, že je pozadí jednolité.

Živá ukázka

text-decoration-skip

Do budoucna počítá CSS specifikace s možnostmi ovlivnit výchozí podtržení pomocí nové vlastnosti text-decoration.

• text-decoration-color – přímé nastavení barvy podtržení
• text-decoration-skip – umožní nepřeškrtnout pod řádek sahající písmena
• text-underline-position – umožní přesun podtržení až pod písmena sahající pod úroveň řádku

Podpora v prohlížečích se pomalu rozšiřuje.

Nepřeškrtnutí s text-decoration-skip: ink

Zvlášť hezká je možnost zbavit se ošklivého přeškrtávání písmen při podtržení.

Prohlížeče Chrome 57 a Opera 44 (a novější verse) už si vystačí s prostým:

a {
  text-decoration-skip: ink;    
}

Není tak potřeba používat různé hacky, pro zamaskování podtržení okolo písmen. Ukázka.

Odkazy jinam

• CSS-Tricks: Styling Underlines on the Web
• Sitepoint: The Secret to Underlined Links That Don’t Sting Your Eyes?
• Adam Schwartz: Smarter Link Underlines For Every Website
• Crafting link underlines on Medium