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

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í.

Nepřeškrtávání písmen

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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Skloňování v CSS

„Programování“ v HTML a CSS

I bez úprav logiky serverového skriptu lze lecčeho dosáhnout samotným CSS.

Centrování v CSS

Centrování na webových stránkách

Ucelený popis různých způsobů vertikálního i horizontálního centrování. Se známou i neznámou šířkou nebo výškou.

Odkaz jako tlačítko

Odkaz vypadající jako tlačítko

Odkaz jako tlačítko, nebo tlačítko jako odkaz? Postup, jak z odkazu vyrobit tlačítko a naopak.

CSS vyhledávání a filtrování

CSS vyhledávání a filtrování obsahu

Jak pomocí CSS se špetkou JS filtrovat obsah stránky nebo na ní vyhledávat.

Zobrazení popisku při najetí myší

Popisek po najetí myší

Kterak zobrazovat obsah v tooltipu po najetí myši.

Komentáře