O webu
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.

Přeškrtnutí písmen

Vyřešit tuto situaci je možné 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

Budoucnost

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

Odkazy jinam