Css tečkované podtržení. Jak přidat tečkované podtržení do odkazů? text-underline-position - umístění podtržení CSS

Podtrhnout pro blokové prvky jako štítek

lze provést dvěma způsoby. Například nastavte řádek pod textem na celou šířku bloku bez ohledu na objem textu. A také podtrhnout pouze text. Dále zvážíme obě možnosti.

Řádek pod textem přes celou šířku bloku

Chcete-li vytvořit čáru pod textem, přidejte k prvku stylová vlastnost border-bottom , jeho hodnota je jak tloušťka čáry, tak její styl a barva (příklad 1).

Příklad 1. Plná šířka čáry

HTML5 CSS 2.1 IE Cr Op Sa Fx

Příklad textu

Vzdálenost od řádku k textu lze upravit přidáním vlastnosti padding-bottom do selektoru H1. Výsledek tento příklad znázorněno na Obr. 1.

Podtrhněte text

Chcete-li podtrhnout pouze text, musíte použít vlastnost text-decoration s hodnotou underline , kterou opět přidáte do selektoru H1 (příklad 2).

Příklad 2. Šířka od řádku k textu

HTML5 CSS 2.1 IE Cr Op Sa Fx

Příklad textu

Černý nadpis přitahuje pozornost, i když je černý a ne bílý.

Výsledek tohoto příkladu je znázorněn na Obr. 2.

V případě použití vlastnosti textové dekoracečára je pevně připojena k textu, takže její polohu a styl nelze určit.

Je tam parta odlišně podtržení designu. Možná si vzpomínáte na článek Marcina Vichariho „Crafting link underlines“ na Mediu. Vývojáři Medium se nesnaží o nic šíleného, ​​chtějí jen vytvořit pěknou čáru pod textem.

Toto je nejjednodušší podtržítko, ale má správnou velikost a nepřekrývá přípony písmen. A rozhodně je lepší než výchozí podtržítko ve většině prohlížečů. Medium muselo čelit výzvám, aby dosáhlo svého stylu na webu. O dva roky později je pro nás stále obtížné vytvořit krásné podtržení.

Cíle

Co je špatného na obvyklém zdobení textu: podtržení ? Li mluvíme o Pokud jde o ideální scénář, podtržítko by mělo dělat následující:

• pozice pod základní linií;
• přeskočit popisky;
• změnit barvu, tloušťku a styl čáry;
• pracovat s víceřádkový text;
• pracovat na jakémkoli pozadí.

Věřím, že to jsou všechno rozumné požadavky, ale pokud vím, neexistuje žádný intuitivní způsob, jak toho dosáhnout pomocí CSS.

Přístupy

Tak co to je různými způsoby, které můžeme použít k implementaci podtržení na webu?

Zde jsou ty, které zvažuji:

• text-dekorace;
• hranice-dole ;
• box-shadow ;
• obrázek na pozadí;
• SVG filtry;
• Underline.js(canvas);
• text-dekorace-* .

Podívejme se na tyto metody jednu po druhé a promluvme si o výhodách a nevýhodách každé z nich.

text-dekorace

text-decoration je nejviditelnější způsob, jak podtrhnout text. Aplikujete jednu vlastnost a to stačí. Na malé velikosti V písmu to může vypadat dobře, ale zvětšete velikost písma a podtržení začne vypadat trapně.

Nejvíce velký problém u textové dekorace je to nedostatek nastavení. Jste omezeni na barvu a velikost písma textu a neexistuje žádný způsob, jak to změnit v různých prohlížečích. O tom si povíme podrobněji později.

• snadné použití;
• umístěné pod základní linií;
• ve výchozím nastavení přeskakuje popisky v Safari a iOS;
• zdůrazňuje víceřádkový text;
• funguje na jakémkoli pozadí.

• nepřeskočí zápatí ve všech ostatních prohlížečích;
• neumožňuje změnit barvu, tloušťku nebo styl čáry.

hranice-dole

border-bottom vytváří dobrou rovnováhu mezi jednoduchostí a přizpůsobitelností. Tento přístup využívá starou dobrou vlastnost okraje CSS, což znamená, že můžete snadno změnit barvu, tloušťku a styl.

Takto vypadá border-bottom inline prvky.

Hlavní nevýhoda- toto je vzdálenost podtržení od textu, je zcela pod prvky popisku. Můžete to opravit nastavením prvků na inline-block a snížením výšky řádku , ale pak ztratíte možnost zalamovat text. Dobré pro jednotlivé linky, ale jinde se nehodí.

Navíc můžeme použít stín textu k zakrytí části čáry vedle vložených prvků, což simuluje použitím stejné barvy jako pozadí. To znamená, že tato technika funguje pouze na jednoduchém jednobarevném pozadí, bez přechodů, vzorů nebo obrázků.

Na momentálně K návrhu jednoho řádku již používáme až čtyři vlastnosti. Je to mnohem více práce než pouhé přidání textové dekorace.

• umí přeskočit popisky pomocí text-shadow ;
• může změnit barvu, váhu a styl čáry;
• umožňuje používat přechody a animace barev a tučnosti;
• pracuje s víceřádkovým textem, pokud není použit inline-block;
• funguje na jakémkoli pozadí, pokud nepoužíváte text-shadow .

• umístěn příliš nízko a pohybuje se složitým způsobem;
• používá se mnoho dalších vlastností řádný provoz;
• při použití stínu textu vypadá zvýraznění textu ošklivě.

box-shadow

box-shadow nakreslí dolní index pomocí dvou vnitřní stíny: jeden vytvoří obdélník a druhý skryje jeho část. To znamená, že potřebujete prosté pozadí aby to fungovalo.

Stejný trik s textovým stínem můžete použít k vyplnění mezer mezi podtržením a popisky. Pokud se však barva podtržení liší od barvy textu – nebo je jen dostatečně tenká – čára nebude kolidovat s popisky tolik, jako by tomu bylo u zdobení textu .

• umožňuje změnit barvu a tloušťku čáry;
• pracuje s víceřádkovým textem.

• neumožňuje změnit styl podtržení;
• Nefunguje na žádném pozadí.

obrázek na pozadí

Metoda obrázku na pozadí je nejblíže tomu, co chceme, a má nejmenší množství nevýhod. Cílem je použít lineární přechod a pozici pozadí k vytvoření obrazu, který se opakuje pod řádky textu.

Aby tento přístup fungoval, musí být text in standardní režim zobrazení: inline; .

Další možnost se obejde bez lineárního přechodu, pro efekty můžete přidat vlastní obrázek na pozadí.

• lze umístit pod základní linii;
• umí přeskočit prvky popisku pomocí text-shadow ;
• pracuje s vlastními obrázky;
• zalamuje více řádků textu;
• Funguje na jakémkoli pozadí, pokud nepoužíváte text-shadow .

• Velikost obrázku se může lišit v závislosti na rozlišení obrazovky, prohlížeči a zvětšení.

SVG filtry

S touto metodou jsem si docela hrál. Můžete vytvořit filtr čar SVG, který nakreslí čáru a poté rozšíří text, aby zamaskoval část čáry, kterou chceme, aby byla průhledná. Filtru pak můžete dát ID a odkazovat na něj v CSS něco jako filtr: url(‘#svg-underline’) .

Výhodou tohoto přístupu je, že průhlednosti je dosaženo bez použití stínu textu , což znamená, že se popisky objeví na jakémkoli pozadí, včetně přechodů a obrázky na pozadí! Toto funguje pouze na jednom řádku textu, takže na to pamatujte.

V Chrome a Firefoxu to vypadá takto:

Podpora v IE, Edge a Safari je problematická. Je těžké testovat podporu SVG filtrů v CSS. Můžete použít direktivu @supports s filter , ale tím se zkontroluje pouze funkčnost odkazu na filtr, nikoli funkčnost samotného filtru. Moje pokusy skončily zdlouhavým zjišťováním schopností prohlížeče, což je znatelný nedostatek této metody.

• lze umístit pod základní linii;
• může přeskočit rozšiřující prvky;
• umožňuje změny barvy, tloušťky a stylu čáry;
• funguje na jakémkoli pozadí.

• nefunguje s víceřádkovým textem;
• nefunguje v IE, Edge a Safari, ale můžete použít zdobení textu jako záložní, v Safari to vypadá slušně.

Underline.js (Canvas)

Underline.js je fascinující. Považuji za působivé, čeho dosáhla Wenting Zhang se svým ovládáním JavaScriptu a smyslem pro detail. Pokud jste neviděli technické demo Underline.js, přestaňte číst a dejte mu chvilku. Je od ní také devítiminutová řeč o tom, jak to funguje, ale zkrátím to: Podtržení se kreslí pomocí prvků . Tento nový přístup, který funguje překvapivě dobře.

Přes chytlavý název je Underline.js jen technické demo. To znamená, že jej nemůžete jen tak zapojit do svého projektu, aniž byste změnili kód.

Myslel jsem, že to zmíním jako důkaz konceptu má potenciál vytvářet skvělé interaktivní podtržení, ale musíte si napsat svůj vlastní JavaScript, aby to fungovalo.

Nové vlastnosti zdobení textu

Pamatuješ si, že jsem slíbil, že budu mluvit víc o zdobení textu. Nastal čas.

Tato vlastnost funguje skvěle sama o sobě, ale můžete ji vylepšit přidáním experimentálních vlastností vzhled podtržení.

• text-dekorace-barva
• text-dekorace-přeskočit
• text-decoration-style

Ale nebuďte příliš nadšení... Podpora prohlížeče je jako vždy. Takové věci.

text-dekorace-barva

Vlastnost text-decoration-color umožňuje změnit barvu podtržení odděleně od barvy textu. Podpora této vlastnosti je lepší, než byste čekali – funguje ve Firefoxu a s předponou v Safari. Zde je háček: pokud máte popisky, Safari umístí nad text podtržení.

text-dekorace-přeskočit

Vlastnost text-decoration-skip umožňuje přeskakování popisků v podtrženém textu.

Tato vlastnost je nestandardní a v současnosti funguje pouze v Safari s předponou -webkit-. Safari tuto vlastnost ve výchozím nastavení povoluje, takže popisky nejsou vždy přeškrtnuty.

Pokud používáte Normalize, mějte na paměti, že nejnovější verze zakázat tuto vlastnost v zájmu konzistentního chování prohlížeče. A pokud chcete, aby podtržení neovlivnilo popisky, musíte jej aktivovat ručně.

text-decoration-style

Vlastnost text-decoration-style nabízí stejné možnosti stylu jako vlastnosti ve stylu ohraničení, přidává navíc vlnitý styl.

Zde je seznam dostupných hodnot:

• čárkovaná
• tečkovaný
• dvojnásobek
• solidní

V současné době vlastnost text-decoration-style funguje pouze ve Firefoxu, zde je z ní snímek obrazovky:

Co chybí

Série vlastností text-decoration-* je mnohem intuitivnější než ostatní Vlastnosti CSS pro podtržení. Pokud se ale podíváme blíže, není dostatek způsobů, jak nastavit tloušťku nebo polohu čáry, abychom uspokojili naše potřeby.

Po krátkém průzkumu jsem našel několik dalších vlastností:

• šířka-podtržení textu
• text-podtržení-pozice

Zdá se, že se jedná o rané návrhy CSS, ale nikdy nebyly implementovány do prohlížečů kvůli nedostatku zájmu.

Závěry

Jaký je tedy nejlepší způsob, jak podtrhnout?

Pro malý text doporučuji použít text-decoration s optimistickým přidáním text-decoration-skip . Ve většině prohlížečů to vypadá trochu nevkusně, ale podtržení bylo v prohlížečích vždy takové a lidé si toho prostě nevšimnou. Navíc je vždy šance, že když budete trpěliví, bude to podtržení jednoho dne vypadat dobře, aniž byste museli cokoliv měnit tak, jak to dělají prohlížeče.

Pro hlavní text má smysl použít background-image . Tento přístup funguje, vypadá skvěle a existují na to Sass mixiny. V zásadě můžete přeskočit stín textu, pokud je podtržení tenké nebo má jinou barvu než text.

Pro samostatné řádky text použijte border-bottom spolu s libovolným další vlastnosti.

A pokud potřebujete, aby se popisky objevily na přechodu nebo na pozadí obrázku, zkuste použít filtry SVG. Nebo se prostě vyhněte používání podtržítek.

V budoucnu, až se podpora prohlížeče zlepší, bude jedinou odpovědí sada vlastností text-decoration-*.

Doporučuji se také podívat na článek Benjamina Woodroffe CSS Underlines Suck, který se zabývá stejnými problémy.

Rádi bychom upozornili, že tomu tak není hraniční význam v CSS, ale trochu jinou hodnotu, jejíž použití nevyžaduje použití skriptů nebo flash. Pojďme tedy začít.

Možnosti podtržení

Ve skutečnosti může být mnoho možností - vše závisí na vaší fantazii. Ukážeme vám tři různé možnosti: Nalevo, uprostřed a napravo se zobrazí pruh.

Příklad 1: levé podtržítko

HTML

Nejprve vytvoříme prvek. Například značka a, což je odkaz.

CSS

Normálně je podtržení definováno hodnotou text-decoration, ale animace v tomto případě nebude fungovat. V v tomto případě Vynecháme jej a přiřadíme pseudoprvek :before , pomocí kterého se podtržení zobrazí jako animované.

A ( display: inline-block; position: relativní; text-decoration: none; )

Tomuto prvku jsme dali blokové zalomení, které nedovolí, aby podtržení přesáhlo hranice prvku a umožní umístění tagu kamkoli uvnitř bloku. Dále přejdeme k pseudoprvku :before.

A:before ( display: block; position: absolute; content: ""; height: 2px; width: 0; background: #ec4444; transition: width 0.3s easy-in-out; left: 0; bottom: 0; )

zeptali jsme se absolutní umístění pseudoprvek tak, aby podtržení bylo uvnitř značky a nepřesahovalo ji. Výška pruhu bude 2 pixely, délka bude 0, barva bude červená a za animaci bude zodpovědná hodnota přechodu. Teď už zbývá jen přidat efekt hoveru.

A:hover:before (šířka: 40%; )

Hodnotu délky tedy nastavíme na 40 % celé délky prvku. Analogicky vám řeknu o dalších příkladech, kde použijeme jiný pseudoprvek.

Příklad 2: Středové podtržení

HTML

Necháme stejnou značku.

CSS

a ( display: inline-block; position: relativní; text-decoration: none; ) a:before ( display: block; position: absolute; content: ""; height: 2px; width: 0; background: #ec4444; transition : šířka 0,3s náběh zleva, 0,3s náběh doleva: 50 %; a:po ( zobrazení: blok; pozice: absolutní; obsah: ""; výška: 2px; šířka : 0 barva pozadí: #ec4444; šířka 0,3s;

A:hover:before ( šířka: 50 %; vlevo: 0; ) a:hover:after ( šířka: 50 %; )

Při najetí myší chceme, aby podtržení šlo od středu k okrajům prvku. Nastavíme tedy levé umístění pseudoprvku :before na 0, což způsobí, že se podtržení objeví směrem k levému okraji.

Příklad 3: Pravé podtržení

HTML

text odkazu

CSS

a ( display: inline-block; position: relativní; text-decoration: none; ) a:after ( display: block; position: absolute; content: ""; height: 2px; width: 0; background: #ec4444; transition : šířka 0,3s náběh vpravo: 0 ) a:hover:after ( šířka: 40 %; )

Tím jsme získali vzhled podtržení vpravo.