Du har sikkert lagt mærke til den animerede understregning af links på mange ressourcer og ønskede at vide, hvordan du implementerer det på dit websted. At lave noget smukt css understregning elementer, behøver vi ikke meget viden eller forbinder yderligere scripts, alt hvad vi behøver er standard HTML og CSS.

Variationer af understregning

Understregning af links eller andre elementer kan du finde på, hvad du vil. Understregningen kan flyde op fra bunden, bevæge sig ud til venstre eller højre osv. Vi vil se på mere interessant eksempel, hvor understregningen vil spredes ud fra midten til kanterne, som i demoen nedenfor.

understrege demonstration

HTML

Lad os først oprette et element, for eksempel tage A-tagget. Dens egenskab er ikke vigtig for os, fordi det meste af arbejdet vil blive afsat til stilarter.

CSS

Implementeringen vil bestå af to linjer, der vil strække sig fra midten af ​​bunden af ​​elementet til dets kanter.

Vi er ansvarlige for at understrege tekst-dekoration egenskab, men det giver ikke mening at bruge det her, fordi implementering af vores animationsplaner i dette tilfælde ikke er helt relevant. Lad os ikke glemme, at hvert element kan tildeles et pseudo-element::før eller::efter . Derfor vil vi indstille alle egenskaberne til dem og straks indstille følgende parametre til vores link:

A( display: inline-blok; position: relativ; tekst-dekoration: ingen; )

Således indstiller vi blokstrømlining og positionering i forhold til den oprindelige placering. Alt dette er gjort for at understregningen ikke strækker sig ud over elementet, når vi tildeler ::before pseudo-elementet absolut positionering. Efter dette skal vi indstille dens klare placering og størrelse. Og her skaber vi straks første halvdel af understregningen.

A::before( display: blok; position: absolut; indhold: ""; højde: 2px; bredde: 0; baggrundsfarve: rød; overgang: bredde .5s ease-in-out, venstre .5s ease-in- ude venstre: 50%;

De der. Højden på understregningen vil være 2px, længde 0, rød, og overgangsegenskaben er ansvarlig for animationen. Og selvfølgelig er venstre fordybning 50%, dvs. midtpunkt. Vi udfører næsten de samme handlinger med ::after pseudo-elementet:

A::after( display: blok; position: absolut; indhold: ""; højde: 2px; bredde: 0; baggrundsfarve: rød; overgang: bredde .5s let ind-ud; venstre: 50%; bund: 0;)

A:hover::before( width: 50%; left: 0; ) a:hover::after( width: 50%; )

Det er værd at bemærke, at dette kun er én måde at implementere denne idé på. Du kan gøre det samme ved at bruge ét pseudo-element::before . Abonner på materialer og foreslå emner til artikler.

Der er en flok forskellige veje understregningsdesign. Du husker måske Marcin Vicharis artikel "Crafting link underlines" på Medium. Medium-udviklerne forsøger ikke at gøre noget skørt, de vil bare skabe en flot linje under teksten.

Dette er den enkleste understregning, men det har den rigtige størrelse og det overlapper ikke bogstavudvidelser. Og det er bestemt bedre end standardunderstregningen i de fleste browsere. Medium skulle stå over for udfordringer for at opnå sin stil på nettet. To år senere har vi stadig svært ved at skabe smuk understregning.

Mål

Hvad er der galt med den sædvanlige tekst-dekoration: understregning? I et ideelt scenarie bør understregningen gøre følgende:

• position under basislinjen;
• spring over forklaringer;
• ændre linjens farve, tykkelse og stil;
• arbejde med flerliniet tekst;
• arbejde på enhver baggrund.

Jeg mener, at det alle er rimelige krav, men så vidt jeg ved, er der ingen intuitiv måde at opnå dette med ved hjælp af CSS.

Tilgange

Så hvad er det her forskellige måder, som vi kan bruge til at implementere understregning på nettet?

Her er dem jeg overvejer:

• tekst-dekoration ;
• grænse-bund ;
• kasse-skygge ;
• baggrundsbillede ;
• SVG filtre;
• Underline.js(lærred);
• tekst-dekoration-* .

Lad os se på disse metoder en efter en og tale om fordele og ulemper ved hver af dem.

tekst-dekoration

tekst-dekoration er mest indlysende måde understregningstekst. Du anvender én ejendom, og det er nok. Ved små skriftstørrelser kan dette se fint ud, men øg skriftstørrelsen, og understregningen begynder at se akavet ud.

For det meste et stort problem med tekst-dekoration er det en mangel på indstillinger. Du er begrænset til tekstens farve og skriftstørrelse, og der er ingen mulighed for at ændre dette på tværs af browsere. Vi vil tale om dette mere detaljeret senere.

• let at bruge;
• placeret under basislinjen;
• springer billedforklaringer over som standard i Safari og iOS;
• understreger flerliniet tekst;
• virker på enhver baggrund.

• springer ikke sidefødder over i alle andre browsere;
• tillader dig ikke at ændre linjens farve, tykkelse eller stil.

grænse-bund

border-bottom skaber en god balance mellem enkelhed og tilpasningsmuligheder. Denne tilgang bruger den gode gamle CSS-kantegenskab, hvilket betyder, at du nemt kan ændre farve, tykkelse og stil.

Sådan ser border-bottom ud inline elementer.

Den største ulempe er understregningens afstand fra teksten, den er helt under billedforklaringerne. Du kan løse dette ved at indstille elementerne til inline-blok og mindske linjehøjden , men så mister du muligheden for at ombryde tekst. God til individuelle linjer, men ikke egnet andre steder.

Derudover kan vi bruge tekst-skygge til at skjule den del af linjen ved siden af ​​de inline-elementer, og simulere dette ved at bruge samme farve som baggrunden. Det vil sige, at denne teknik kun virker på en enkel enkeltfarvet baggrund, uden gradienter, mønstre eller billeder.

På dette øjeblik Vi bruger allerede så mange som fire egenskaber til at designe én linje. Det er meget mere arbejde end blot at tilføje tekst-dekoration.

• kan springe billedforklaringer over ved hjælp af tekst-skygge ;
• kan ændre farve, vægt og linjestil;
• giver dig mulighed for at bruge overgange og animationer af farve og dristighed;
• fungerer med multiline-tekst, medmindre inline-blok er anvendt;
• Virker på enhver baggrund, så længe du ikke bruger tekst-skygge.

• placeret for lavt og bevæger sig på en kompliceret måde;
• mange yderligere ejendomme bruges til korrekt drift;
• Når du bruger tekst-skygge, ser det grimt ud at fremhæve tekst.

kasse-skygge

box-shadow tegner et underskrift ved hjælp af to indre skygger: den ene skaber et rektangel, og den anden skjuler en del af det. Det betyder, at du har brug for almindelig baggrund for at dette kan virke.

Du kan bruge det samme trick med tekst-skygge til at udfylde hullerne mellem understregninger og billedforklaringer. Men hvis understregningsfarven er forskellig fra tekstfarven - eller den er bare tynd nok - vil linjen ikke kollidere med billedforklaringer så meget, som den ville med tekstdekoration.

• giver dig mulighed for at ændre farven og tykkelsen af ​​linjen;
• arbejder med flerliniet tekst.

• tillader dig ikke at ændre understregningsstilen;
• Virker ikke på nogen baggrund.

baggrundsbillede

Baggrundsbillede-metoden er tættest på det, vi ønsker, og har færrest ulemper. Ideen er at bruge lineær gradient og baggrundsposition til at skabe et billede, der gentager sig under tekstlinjer.

For at denne tilgang skal fungere, skal teksten være i standarddisplay: inline; .

Den næste mulighed klarer sig uden lineær gradient, for effekter kan du tilføje dit eget baggrundsbillede.

• kan placeres under basislinjen;
• kan springe billedforklaringselementer over ved hjælp af tekst-skygge ;
• arbejder med brugerdefinerede billeder;
• ombryder flere tekstlinjer;
• Virker på enhver baggrund, så længe du ikke bruger tekst-skygge.

• Billedstørrelsen kan variere afhængigt af skærmopløsning, browser og forstørrelse.

SVG filtre

Jeg har leget en del med denne metode. Du kan oprette et SVG-linjefilter, der tegner en linje og derefter udvider teksten for at maskere den del af linjen, som vi ønsker skal være gennemsigtig. Du kan derefter give filteret et id og henvise til det i CSS noget som filter: url('#svg-underline') .

Fordelen ved denne tilgang er, at gennemsigtighed opnås uden brug af tekst-skygge, hvilket betyder, at vi lader billedforklaringer vises på enhver baggrund, inklusive gradienter og baggrundsbilleder! Dette virker kun på en enkelt tekstlinje, så husk det.

Sådan ser det ud i Chrome og Firefox:

Support i IE, Edge og Safari er problematisk. Det er svært at teste SVG-filterunderstøttelse i CSS. Du kan bruge @supports-direktivet med filter , men dette vil kun kontrollere funktionaliteten af ​​filterreferencen, ikke funktionaliteten af ​​selve filteret. Mine forsøg endte i en kedelig bestemmelse af browserens muligheder, dette er en mærkbar ulempe ved metoden.

• kan placeres under basislinjen;
• kan springe forlængelseselementer over;
• tillader ændringer i linjefarve, tykkelse og stil;
• virker på enhver baggrund.

• fungerer ikke med tekst med flere linjer;
• virker ikke i IE, Edge og Safari, men du kan bruge tekst-dekoration som en reserve, det ser anstændigt ud i Safari.

Underline.js (Canvas)

Underline.js er fascinerende. Jeg synes, det er imponerende, hvad Wenting Zhang har opnået med sin beherskelse af JavaScript og sans for detaljer. Hvis du ikke har set Underline.js tech-demoen, så stop med at læse og giv den et øjeblik. Der er også en ni minutters tale fra hende om, hvordan det virker, men jeg vil holde det kort: Understregningen er tegnet ved hjælp af elementer . Det her ny tilgang, hvilket fungerer overraskende godt.

På trods af det iørefaldende navn er Underline.js blot en teknisk demo. Det betyder, at du ikke bare kan tilslutte det til dit projekt uden at ændre koden.

Jeg tænkte, at jeg ville nævne dette som et bevis på konceptet har potentialet til at skabe fantastiske interaktive understregninger, men du skal skrive dit eget JavaScript for at få det til at fungere.

Nye tekst-dekorationsegenskaber

Du kan huske, at jeg lovede at tale mere om tekst-dekoration. Tiden er inde.

Denne egenskab fungerer godt alene, men du kan tilføje nogle eksperimentelle egenskaber for at tilpasse udseendet af understregningen.

• tekst-dekoration-farve
• tekst-dekoration-spring
• tekst-dekoration-stil

Men bliv ikke for begejstret... Browsersupport er som altid. Sådan går det.

tekst-dekoration-farve

Egenskaben tekst-dekoration-farve giver dig mulighed for at ændre understregningsfarven separat fra tekstfarven. Understøttelse af denne egenskab er bedre, end du måske forventer - den virker i Firefox og med præfikset i Safari. Her er fangsten: Hvis du har billedforklaringer, placerer Safari en understregning oven på teksten.

tekst-dekoration-spring

Egenskaben text-decoration-skip gør det muligt at springe over billedforklaringer i understreget tekst.

Denne egenskab er ikke-standard og fungerer i øjeblikket kun i Safari med præfikset -webkit-. Safari aktiverer denne egenskab som standard, så billedforklaringer er ikke altid overstreget.

Hvis du bruger Normalize, skal du være opmærksom på det seneste versioner deaktiver denne egenskab af hensyn til ensartet browseradfærd. Og hvis du ønsker, at understregningen ikke skal påvirke billedforklaringer, skal du aktivere den manuelt.

tekst-dekoration-stil

Ejendommen i tekstdekorationsstil tilbyder de samme stylingsmuligheder som ejendommen i kantstil, med tilføjelsen af ​​en bølget stil.

Her er en liste over tilgængelige værdier:

• stiplet
• prikket
• dobbelt
• solid

I øjeblikket fungerer egenskaben i tekst-dekorationsstil kun i Firefox, her er et skærmbillede fra det:

Hvad mangler der

Tekst-dekoration-*-serien af ​​egenskaber er meget mere intuitiv at bruge end andre CSS-understregningsegenskaber. Men hvis vi ser nærmere på, er der ikke nok måder at indstille tykkelsen eller positionen af ​​linjen for at tilfredsstille vores behov.

Efter lidt research fandt jeg et par flere egenskaber:

• tekst-understregning-bredde
• tekst-understregning-position

Disse ser ud til at være tidlige udkast til CSS, men blev aldrig implementeret i browsere på grund af manglende interesse.

konklusioner

Så hvad er den bedste måde at understrege på?

Til lille tekst anbefaler jeg at bruge tekst-dekoration med en optimistisk tilføjelse af tekst-dekoration-spring . Det ser lidt klæbrigt ud i de fleste browsere, men understregning har altid været sådan i browsere, og folk vil bare ikke bemærke det. Derudover er der altid en chance for, at hvis du har tålmodighed, vil den understregning se godt ud en dag, uden at du behøver at ændre noget, som browsere gør.

Til brødtekst giver det mening at bruge baggrundsbillede . Denne tilgang virker, ser godt ud, og der er Sass-mixins til det. Du kan i princippet springe tekst-skygge over, hvis understregningen er tynd eller en anden farve end teksten.

For enkelte tekstlinjer skal du bruge kant-bund sammen med evt yderligere ejendomme.

Og hvis du har brug for billedforklaringer til at poppe mod en gradient eller billedbaggrund, så prøv at bruge SVG-filtre. Eller bare undgå at bruge understregninger.

I fremtiden, når browserunderstøttelsen bliver bedre, vil det eneste svar være egenskabssættet tekst-dekoration-*.

Jeg anbefaler også at tage et kig på Benjamin Woodroffes artikel CSS Underlines Suck, som omhandler de samme problemer.

Layoutet af enhver informativ tekst indebærer medtagelse af semantiske hyperlinks eller ankre. Disse elementer tilføjes ved hjælp af "a" (anker) tag. Moderne browsere som standard vise et lignende element med Ofte foretrækker layoutdesignere eller webdesignere enten at ændre denne stil eller fjerne den helt.

I nogle tilfælde er dette virkelig nødvendigt. For eksempel i en tæt referenceblok, hvor unødvendigt design vil kun overbelaste opfattelsen og gøre det vanskeligt at læse dokumentet. I nogle tilfælde er det dog hensigtsmæssigt at opretholde en sondring mellem tekst og links. Hvis webstedsdesignet fuldstændig udelukker sådan formatering, er det værd at bruge enhver anden form for fremhævelse af sådanne elementer. Den mest almindelige form for sondring i dag er farvekontrast ankre i teksten. Det er effektivt. Den eneste lille ulempe ved denne mulighed vil være problemet med at fremhæve tekst af folk, der ikke kan opfatte forskellige farver (farveblindhed). Men dette er så lav en procentdel af brugere, at den kan forsømmes.

Hvis du beslutter dig for at fjerne understregningen af ​​links, så skal du have en vis viden om strukturen på internetsiden, nemlig CSS.

Fjern linkunderstregning fra hele webstedet

For en person, der er velbevandret i webdesign og i særdeleshed, vil det ikke være svært. For at gøre dette skal du bare finde og åbne filen i webstedsfilerne, der er ansvarlig for stylingen. Normalt ligger det i rodmappe og har en .css-udvidelse. Du kan fjerne understregning fra links ved hjælp af denne enkle kode:

tekst-dekoration: ingen;

Denne lille linje vil helt fjerne understregningen af ​​alle elementer skrevet ved hjælp af "a"-tagget på hele webstedet.

Men hvad nu hvis du ikke har adgang til CSS fil?

I dette tilfælde er det tilrådeligt at bruge Style-tagget i begyndelsen af ​​dokumentet. Virker på samme måde som en CSS-fil. For at anvende stilarter er det nødvendigt i begyndelsen af ​​dokumentet (eller HTML-sider) tilføje en konstruktion, hvor den sædvanlige CSS regler stilarter.

Disse stilarter gælder kun for specifik side. De vil ikke gælde for andre sektioner eller dokumenter på webstedet.

Fjern link-understregning ved at holde musen over

Men hvad hvis du har brug for at fjerne linkets understregning, når du svæver? CSS kan også hjælpe os i dette tilfælde. Koden vil se sådan ud:

tekst-dekoration: ingen;

Det er pseudoklassen ":hover", der er ansvarlig for at dekorere elementer, når de svæver over dem.

Ved at kombinere disse to muligheder kan vi få linket til at blive understregning kun ved at svæve, ellers vil det se ud som almindelig tekst:

tekst-dekoration: ingen;

tekst-dekoration: understregning;

Brug af identifikatorer og klasser

Som du kan se fra ovenstående, er det ret nemt at ændre stylingen af ​​et element på et websted eller et HTML-dokument. Ulemperne ved sådanne muligheder er umuligheden af ​​selektivt at anvende stilarter: ikke til hele webstedet eller dokumentet, men til et specifikt link.

Der er flere muligheder for at løse dette problem.

Du kan fjerne understregningen af ​​links inline. Selvom dette strengt taget ikke anbefales ud fra et synspunkt om at optimere webstedet.

For at gøre dette skal du angive stilparameteren direkte i linktagget:

Den anden mulighed er mere acceptabel.

Vi introducerer en ekstra klasse eller id i elementet og tildeler de stilarter, vi har brug for, til disse vælgere:

En klasse skrives med en prik før dens navn:

Ingen_dekoration(

tekst-dekoration: ingen;

Identifikationen er angivet med #-tegnet:

#ingen_dekoration(

tekst-dekoration: ingen;

Denne regel gælder både for CSS-filen og Style-tagget

Ændring af visningsstilen for links i tekst

Dette er også ret simpelt at gøre:

farve :*specificer ønsket farve i ethvert format (*rød, #c2c2c2, rgb (132, 33, 65)*)*;

Lignende styling anvendes i henhold til de samme regler som beskrevet for af-understregning af et link. CSS regler i I dette tilfælde identisk. Ændring af linkfarven og fjernelse af understregningen kan anvendes som en separat styling (så forbliver linket understreget, men vil ændre farven fra standardblå til den farve du ønsker).

Erstatter standard styling

En sidste bemærkning. I stedet for at fortryde understregningen CSS links gør det muligt at udskifte standardværdier registrering For at gøre dette skal du blot erstatte følgende værdier i tekst-dekorationskonstruktionen:

tekst-dekoration-stil:

• Hvis du har brug for en ubrudt linje, skal du angive værdien fast.
• For en bølget linje - bølget.
• Dobbelt linje - henholdsvis dobbelt.
• Linjen kan erstattes med en sekvens af prikker - prikket.
• Understreg et ord som en stiplet linje - stiplet

Du kan også ændre linjens position i forhold til teksten:

Line-text-decoration-line-konstruktionen kan have følgende værdier:

Og farven (ikke at forveksle med tekstfarven!):

tekst-dekorationslinje: (enhver farve i ethvert format * rød, #c2c2c2, rgb (132, 33, 65)*).

For nemheds skyld kan alle tre positioner skrives sammen i konstruktionen:

tekst-dekoration: rød, line-through, bølget.

Giver dig mulighed for at oprette forskellige understregninger i HTML: understregning, overstregning, gennemstregningstekst osv. Lad os kombinere denne funktion med den forrige og få:

Den anden linje viser, hvordan alt er skrevet i en række med tekst-dekoration.

tekst-dekorations-stil — tekstunderstregningsstil

Indstillingen specificerer udseende dekorativ linje til /link. De nye CSS-retningslinjer har tilføjet bølgede og dobbelte værdier, så der er nu 5 af dem:

• solid - solid linje;
• dobbelt - dobbelt (fra det første eksempel ovenfor);
• prikket - består af en sekvens af prikker;
• stiplet - giver dig mulighed for at oprette en stiplet CSS-understregning;
• bølget - en spektakulær bølget linje.

tekst-understregningsposition - CSS-understregningspositionering

Ved at bruge denne egenskab kan du kontrollere linjens position i forhold til skrifttypeglyffen.
Der er i alt 4 muligheder:

• auto — er placeret så tæt som muligt på tekstens grundlinje;
• under - under den nederste kant af skrifttypen;
• venstre og højre - venstre/højre for indlæg vist lodret.

Her er en visuel forskel mellem at understrege tekst ved hjælp af under og auto:

Forskellen synes jeg er ret åbenlys.

tekst-dekoration-spring - fjern understregning for elementer

Ved at bruge denne mulighed kan du annullere (springe over) dekorationen af ​​nogle elementer i HTML linje. For bedre at forstå gyldige værdier mellemrum, objekter, kasse-dekoration, kanter, blæk Jeg vil duplikere billedet fra det forrige indlæg:

Det vil sige, at du for eksempel ved hjælp af blæk kan lave en understregning i CSS, som ikke ville skære hinanden med tegnene. Værdiobjekterne giver dig mulighed for at springe inline-elementer over (inline-blok) - indsæt et span, og den fuldt optrukne linje vil bryde på det passende sted:

Parametrene for kassedekoration, mellemrum og kanter er meget mindre godt understøttet af browsere, så deres resultater afviger nogle gange fra de forventede. Her er status for tekst-dekorationskompatibilitet/support i skrivende stund:

Yderligere tricks til at understrege links

Begyndere spørger ofte nogle typiske spørgsmål om emnet, så vi besluttede også at overveje dem. Generelt eksempel er helt nederst efter forklaringerne.

Sådan fjerner du linket understregning

a:hover ( tekst-dekoration: understregning; )

Begge eksempler nedenfor giver dig mulighed for at forstå logikken i, hvordan hover fungerer: enten angiver du i starten linkunderstregning i CSS'en og fjerner det derefter i hoveren, eller omvendt.

Hvis du har andre spørgsmål om emnet, så spørg dem i kommentarerne. Vi vil prøve at se nærmere på det senere eller give dig nogle tip i svarene. Det vigtigste i denne sag er øvelse - prøv at tilføje forskellige egenskaber til tekst-dekorationsmuligheden direkte i eksemplerne eller opret din egen testfil. Vi håber, at alt er blevet klart om emnet understregning af tekst og links i CSS/HTML.