Postoji mnogo različitih načina za stiliziranje podvlačenja. Možda se sjećate članka Marsina Vicharija “Crafting link underlines” na Medium-u. Srednji programeri ne pokušavaju napraviti nešto ludo, oni samo žele napraviti lijepu liniju ispod teksta.

Ovo je najjednostavnije podvlačenje, ali je prave veličine i ne preklapa se sa zaglavljem. I definitivno je bolji od zadanog podvlačenja u većini pretraživača. Medium se borio da postigne svoj stil na webu. Dvije godine kasnije, još uvijek nam je teško napraviti lijepu podcrtanu liniju.

Ciljevi

Šta fali uobičajenom tekstualnom ukrasu: podcrtaj? U idealnom scenariju, donja crta bi trebala činiti sljedeće:

• biti postavljen ispod osnovne linije;
• preskočiti oblačiće;
• promijeniti boju, debljinu i stil linije;
• rad sa višelinijskim tekstom;
• raditi na bilo kojoj pozadini.

Mislim da su to sve razumni zahtjevi, ali koliko ja znam ne postoji intuitivan način da se to postigne pomoću CSS-a.

Prilazi

Dakle, koji su to različiti načini na koje možemo implementirati podvlačenje na webu?

Evo onih koje razmatram:

• dekoracija teksta ;
• border bottom ;
• box-shadow ;
• pozadinska slika ;
• SVG filteri;
• Underline.js (platno);
• text-decoration-* .

Pogledajmo ove metode jednu po jednu i razgovarajmo o prednostima i nedostacima svake od njih.

tekst-dekoracija

dekoracija teksta je najočitiji način da se podvuče tekst. Primjenite jedno svojstvo i to je dovoljno. Na malim veličinama fonta ovo bi moglo izgledati sasvim pristojno, ali povećajte veličinu fonta i podvlačenje počinje izgledati nezgodno.

Najveći problem kod dekoracije teksta je nedostatak postavki. Ograničeni ste bojom i veličinom fonta teksta i ne postoji način da ga promijenite u više pretraživača. O ovome ćemo više razgovarati kasnije.

• jednostavan za korištenje;
• pozicioniran ispod osnovne linije;
• preskače descendere prema zadanim postavkama u Safariju i iOS-u;
• podvlači višeredni tekst;
• radi na bilo kojoj pozadini.

• ne preskače descendere u svim drugim pretraživačima;
• ne dozvoljava vam da promijenite boju, debljinu ili stil linije.

border-bottom

border-bottom stvara dobar balans između jednostavnosti i prilagodljivosti. Ovaj pristup koristi dobro staro CSS svojstvo za ivicu, što znači da možete lako promijeniti boju, debljinu i stil.

Ovako izgleda granica-dno na inline elementima.

Glavni nedostatak je udaljenost podvlačenja od teksta, potpuno je ispod oblačića. Ovo možete popraviti postavljanjem elemenata na inline-block i smanjenjem line-height , ali tada gubite mogućnost prelamanja teksta. Dobro za pojedinačne linije, ali nije dobro nigdje drugdje.

Dodatno, možemo koristiti sjenku teksta da preklopimo dio linije pored descendera, simulirajući to istom bojom kao pozadina. Odnosno, ova tehnika radi samo na običnoj, jednobojnoj pozadini, bez preliva, uzoraka ili slika.

Trenutno već koristimo čak četiri nekretnine za dizajniranje jedne linije. To je puno više posla nego samo dodavanje tekstualne dekoracije.

• može preskočiti oblačiće s text-shadow ;
• može promijeniti boju, težinu i stil linije;
• omogućava vam korištenje prijelaza i animacija boja i težine;
• radi s višerednim tekstom osim ako se ne primjenjuje inline-block;
• radi na bilo kojoj pozadini sve dok ne koristite text-shadow.

• postavljen prenisko i pomaknut na komplikovan način;
• mnoga dodatna svojstva koriste se za pravilan rad;
• kada se koristi text-shadow, odabir teksta izgleda ružno.

box shadow

box-shadow crta podliniju sa dvije unutrašnje sjene: jedna stvara pravougaonik, a druga skriva dio. To znači da vam je potrebna čvrsta pozadina da bi ovo funkcioniralo.

Možete koristiti isti trik sa sjenom teksta kako biste popunili praznine između podcrtanih i descendera. Ali ako se boja podvlačenja razlikuje od boje teksta - ili je samo dovoljno tanka - linija se neće sudarati s oblačićima kao što bi bila s dekoracijom teksta.

• omogućava vam da promijenite boju i debljinu linije;
• radi sa višelinijskim tekstom.

• ne dozvoljava promjenu stila podvlačenja;
• ne radi ni na jednoj pozadini.

pozadinska slika

Metoda pozadinske slike najbliža je onome što želimo i ima najmanje nedostataka. Ideja je koristiti linearni gradijent i pozadinu za kreiranje slike koja se ponavlja ispod redova teksta.

Da bi ovaj pristup funkcionirao, tekst mora biti u standardnom načinu prikaza: inline; .

Sljedeća opcija ne radi bez linearnog gradijenta, možete dodati vlastitu pozadinu za efekte.

• može se postaviti ispod osnovne linije;
• može preskočiti oblačiće s text-shadow ;
• radi sa prilagođenim slikama;
• prelama više redova teksta;
• radi na bilo kojoj pozadini sve dok nije primijenjena sjena teksta.

• Veličina slike može varirati u zavisnosti od rezolucije ekrana, pretraživača i uvećanja.

SVG filteri

Igrao sam se dosta sa ovom metodom. Možete kreirati SVG inline filter koji crta liniju, a zatim proširuje tekst da maskira dio linije koji želimo učiniti transparentnim. Zatim možete filteru dati id i upućivati ​​ga u CSS kao filter: url('#svg-underline') .

Prednost ovog pristupa je što se transparentnost postiže bez primjene sjene teksta, što znači da preskačemo oblačiće na bilo kojoj pozadini, uključujući gradijente i pozadinske slike! Ovo radi samo na jednom redu teksta, imajte to na umu.

Evo kako to izgleda u Chromeu i Firefoxu:

Podrška u IE, Edge i Safari je problematična. Teško je testirati podršku za SVG filter u CSS-u. Možete koristiti direktivu @supports sa filterom, ali ovo samo provjerava da li link na filter radi, a ne i sam filter. Moji pokušaji su se završili sumornom definicijom mogućnosti pretraživača, što je opipljiv nedostatak metode.

• može se postaviti ispod osnovne linije;
• može preskočiti oblačiće;
• omogućava promjenu boje, debljine i stila linije;
• radi na bilo kojoj pozadini.

• ne radi sa višelinijskim tekstom;
• ne radi u IE, Edge i Safariju, ali možete koristiti tekstualnu dekoraciju kao zamjenu, izgleda pristojno u Safariju.

Underline.js (Canvas)

Underline.js je neverovatan. Smatram da je impresivno šta je Venting Zhang uradila sa svojim JavaScript vještinama i pažnjom na detalje. Ako niste vidjeli tehničku demonstraciju Underline.js, prestanite čitati i ostavite trenutak. Tu je i njen devetominutni govor o tome kako to funkcionira, ali ću ukratko opisati: podvučena crta je nacrtana pomoću elemenata . Ovo je novi pristup koji radi iznenađujuće dobro.

Uprkos privlačnom nazivu, Underline.js je samo tehnički demo. To znači da ga ne možete jednostavno uzeti i uključiti u svoj projekat bez promjene koda.

Odlučio sam to spomenuti kao dokaz koncepta ima potencijal za stvaranje prekrasnih interaktivnih podvlačenja, ali morate napisati svoj vlastiti JavaScript da bi funkcionirao.

Nova svojstva dekoracije teksta

Sjećate se da sam obećao da ću više pričati o dekoraciji teksta. Došlo je vrijeme.

Samo po sebi, ovo svojstvo radi odlično, ali možete dodati nekoliko eksperimentalnih svojstava da prilagodite izgled podvlačenja.

• tekst-dekoracija-boja
• text-decoration-skip
• text-decoration-style

Ali nemojte se previše uzbuđivati... Podrška za pretraživač kao i uvijek. Tako to ide.

tekst-dekoracija-boja

Svojstvo text-decoration-color vam omogućava da promijenite boju podvlačenja odvojeno od boje teksta. Podrška za ovo svojstvo je bolja nego što biste očekivali - radi u Firefoxu i ima prefiks u Safariju. Evo kvake: ako imate oblačiće, Safari će staviti podvučenu crtu na vrh teksta.

text-decoration-skip

Svojstvo text-decoration-skip omogućava preskakanje oblačića u podvučenom tekstu.

Ovo svojstvo je nestandardno i trenutno radi samo u Safariju, s prefiksom -webkit-. Safari podrazumevano omogućava ovo svojstvo, tako da oblačići nisu uvek precrtani.

Ako koristite Normalize, imajte na umu da najnovije verzije onemogućavaju ovo svojstvo radi dosljednog ponašanja pretraživača. A ako želite da podvlačenje ne utiče na oblačiće, morate ga ručno aktivirati.

text-decoration-style

Svojstvo u stilu dekoracije teksta nudi iste opcije dekoracije kao svojstvo u stilu obruba, uz dodatak valovitog stila.

Evo liste dostupnih vrijednosti:

• isprekidano
• tačkasta
• duplo
• solidan

Trenutno svojstvo text-decoration-style radi samo u Firefoxu, evo snimka ekrana:

Šta nedostaje

Serija svojstava text-decoration-* je mnogo intuitivnija za upotrebu od ostalih CSS svojstava za podvlačenje dekoracije. Ali ako bolje pogledate, nema dovoljno načina za postavljanje debljine ili položaja linije kako bi se zadovoljili naši zahtjevi.

Nakon malog istraživanja, pronašao sam još nekoliko nekretnina:

• text-underline-width
• tekst-podvučena-pozicija

Čini se da su to rani nacrti CSS-a, ali nikada nisu implementirani u pretraživače zbog nedostatka interesa.

zaključci

Dakle, koji je najbolji način da se podvuče?

Za mali tekst preporučujem korištenje text-decoration sa optimističnim dodatkom text-decoration-skip . U većini pretraživača izgleda pomalo šaljivo, ali podvlačenje je oduvek bilo u pretraživačima i ljudi to jednostavno neće primetiti. Osim toga, uvijek postoji šansa da, ako ste strpljivi, ta podvlaka jednog dana izgleda dobro, a da ne morate ništa mijenjati, kao što to rade pretraživači.

Za osnovni tekst, ima smisla koristiti background-image. Ovaj pristup radi, izgleda sjajno i ima Sass miksine za to. Možete, u principu, preskočiti sjenku teksta ako je podvučena linija tanka ili je različite boje od teksta.

Za pojedinačne redove teksta, koristite dno ivice zajedno sa svim dodatnim svojstvima.

A ako želite da oblačići preskaču gradijent ili pozadinu slike, pokušajte koristiti SVG filtere. Ili jednostavno izbjegavajte korištenje donjih crta.

U budućnosti, kako se podrška pretraživača bude poboljšala, jedini odgovor će biti set svojstava text-decoration-*.

Takođe preporučujem da pogledate članak Benjamina Woodroffea CSS Underlines Suck, koji se bavi istim problemima.

Na ovoj stranici ćete pronaći primjere kako da izmijenite HTML veze pomoću CSS-a, koji vam omogućava da blokirate veze, veze ikona, bez podvlačenja, zaobljene uglove, promijenite razmak između njih i još mnogo toga. U budućnosti, na osnovu ovih primjera, možete kreirati različite opcije za navigacijske menije za stranicu.

Prije nego počnete proučavati primjere, želim malo pojasniti. U svim primjerima, radi veće jasnoće, koristit će se CSS pseudo-klasa, koja se koristi za promjenu stilova veza kada pređete preko njih kursorom miša. Moram reći da je ova praksa uobičajena i da se, u jednoj ili drugoj mjeri, koristi na gotovo svim internet stranicama.

U ovom primjeru, uklonit ćemo podvučenu crtu sa veza, a zatim ćemo ih dodati ili ukloniti pri lebdenju.

HTML i CSS primjer: kako ukloniti i dodati podvlačenje sa linkova

Opis primjera

1. Podrazumevano, svi popularni pretraživači dodaju podvučenu liniju vezama, što je kontrolisano CSS svojstvom. To jest, po defaultu je ovo svojstvo, za veze, postavljeno na podvlačenje. Koristeći ovo znanje, mijenjamo podvlačenje veza u različitim stanjima.

U početku, podvlačenje veza je puna tanka linija, skoro pritisnuta uz tekst. I u većini slučajeva ova opcija je dovoljna. Međutim, ponekad dizajn zahtijeva da veze ne budu podvučene punom linijom, već, na primjer, isprekidanom linijom, ili da udaljenost od podvučene linije do veza bude veća od standardne, ili sama podvučena linija treba biti podebljana. . A ponekad trebate napraviti neku vrstu egzotičnog podvlačenja, na primjer, valovitu ili višebojnu liniju. Sve ove opcije će se razmotriti u ovom primjeru.

Primjer HTML i CSS: Isprekidane podvučene veze

Opis primjera

1. Prvo uklanjamo standardno podvlačenje sa svih veza, jer ćemo koristiti nestandardne metode. Zatim dodajemo donju ivicu okvira na prvu vezu koristeći CSS svojstvo i pravimo je tačkastim (isprekidanim). Ovo će biti naš vrhunac. Da bismo uklonili podvučenu crtu kada se lebdi preko veze, koristimo pseudo-klasu i činimo pozadinu okvira istom kao i pozadina stranice, odnosno jednostavno je sakrivamo. U teoriji, ovdje bi bilo bolje učiniti pozadinu okvira uopće transparentnom (transparentnom), ali IE6 pogrešno razumije ovu vrijednost.
2. Sa drugom vezom radimo isto kao i sa prvom, ali samo crtamo punu liniju. Da bismo povećali udaljenost od teksta do podvučene crte, postavili smo vezu s malom donjom uvlakom koristeći CSS svojstvo.
3. Naša treća veza ima podvučenu liniju u više boja, pa ćemo je dodati sa slikom u pozadini. Za to koristimo malu sliku koju povezujemo preko CSS-a. Postavite pozadinu na dno veze (0 100%) i dozvolite da se duplira samo horizontalno (repeat-x). Podvlačenje je gotovo, ali je preblizu tekstu da bi se to popravilo - dodajte malo uvlačenje na dno veze. To je to.
4. Stariji IE6 i IE7 mogu imati problema s prikazivanjem podvlačenja na prvoj i drugoj vezi. Da to popravimo, dodajemo svojstvo zoom :1, koje uključuje tzv. raspored. Ovo svojstvo je nevažeće i samo ga ovi pretraživači razumiju, pa je bolje da ga omogućite uslovni komentari.

Vrlo često, da biste kreirali meni, morate napraviti ne samo tekstualne veze, već i blok veze, u kojima će aktivno područje biti i sam tekst i određeno područje oko njega.

Opis primjera

1. Za kreiranje blok veza koristimo svojstvo :block CSS, koje ih pretvara u blok elemente koji stvaraju prijelom reda prije i poslije njih. Ako prijelomi redova nisu potrebni, možete zamijeniti vrijednost sa inline-block .
2. Pošto su veze sada blokovi, po potrebi možemo promijeniti njihovu širinu (CSS) ili visinu (CSS).
3. U ovom primjeru uopće ne specificiramo visinu veza, već im jednostavno dajemo interni padding (CSS), koji proširuje blokove.

Opis primjera

1. Sve je vrlo jednostavno - koristeći CSS svojstvo, linkovima ispod kursora dodajemo željeni okvir. Međutim, obratite pažnju, redovnim linkovima dodajemo potpuno isti okvir, samo što ga pravimo iste boje kao i pozadina stranice. Odnosno, za sada jednostavno sakrivamo okvir. Ovo se radi tako da kada zadržite miš, linkovi ne počnu "skakati" zbog renderiranja okvira.

Umjesto da se boja obruba podudara sa pozadinom stranice, mogla je biti postavljena na transparentna i providna, ali kao što sam rekao, IE6 to ne radi ispravno.

HTML i CSS primjer: Kreiranje 3D veza

Opis primjera

1. Koristeći CSS svojstvo, linkovima dodajemo okvire i uz pomoć postavljamo njihovu boju. Istovremeno, za lijevu i gornju ivicu označavamo svijetlu nijansu boje, a za donju i desnu - tamnu. Zahvaljujući ovoj distribuciji boja dobijamo veze koje izgledaju kao trodimenzionalna dugmad.
2. Da bi izgledalo da su dugmad pritisnuta kada se kursor miša pređe preko, invertujemo boje ivica za veze sa pseudo-klasom. Za dodatni efekat klika, postavite relativno pozicioniranje (CSS :relative) i pomaknite ga za jedan piksel (CSS :-1px).
3. Pa, da sve bude potpuno lijepo - postavite tekst i boju pozadine linkova ispod kursora malo tamnije od uobičajenih. Spreman.

U ovom primjeru ćemo napraviti veze sa ikonama koje će sadržavati ne samo slike ovih ikona, već i tekst ispod njih. Međutim, u budućnosti ih možete lako promijeniti i ostaviti, na primjer, samo ikone.

Prije početka rada, pripremimo nekoliko slika ikona, i to u dva seta - za redovne veze i veze ispod kursora miša. Drugi set bi trebao biti eksterno drugačiji od prvog, u našem slučaju je izražen u paleti boja.

Opis primjera

1. Radi skraćivanja koda koristićemo dvije klase u linkovima - "linkovi" (sa zajedničkim svojstvima) i "image", "audio", "video" (lične za svaki link). Ova tačka je detaljno opisana u casovi css referenca.
2. Naše ikone su 50x50px i biće prisutne na linkovima kao pozadina (CSS), koju ćemo centrirati na vrhu (50% 0) i spriječiti da se replicira (bez ponavljanja).
3. Dodajte dopunu vezama (CSS) tako da tekst u vezama ne prianja uz ivice. Istovremeno, gornje uvlačenje pravimo jednakim visini ikona kako se tekst ne bi preklapao s njima, jer su naše ikone pozadina.
4. Ako u linkovima ima vrlo malo teksta, slike ikona će biti odsječene sa strane. Da se to ne dogodi, postavljamo minimalnu širinu linkova (CSS) tako da bude barem jednaka širini ikona. U našem slučaju, moramo dobiti minimalnu širinu od 50px, ali smo je postavili na 40px, budući da će se dodati još 10px zbog bočnog paddinga.
5. Da bi minimalna širina radila, hajde da konvertujemo veze u inline blokove (CSS :inline-block).

IE6 će se morati malo "izliječiti":

1. IE6 ne razumije svojstvo za postavljanje minimalne širine, ali tumači CSS svojstvo tačno kao minimalnu širinu. Stoga za to koristimo jednostavan hack koji će riješiti ovaj problem.

U ovom primjeru ćemo zaokružiti uglove veza koristeći jednu od sljedećih metoda. zaokruživanje uglova opisano u sljedećem pododjeljku. Nećemo razmatrati opciju koristeći CSS 3, jer je tamo sve vrlo jednostavno, već ćemo napraviti zaokruživanje pomoću slika.

Da bismo to učinili, prvo ćemo izrezati nekoliko praznih slika u dva skupa - za obične veze i veze ispod kursora. Kod nas će se razlikovati po prisustvu/odsustvu sjene na slikama.

Opis primjera

Nećemo se zadržavati na samoj tehnologiji zaokruživanja, ako je potrebno, pročitajte o tome u odgovarajućem odjeljku stranice.

1. Koristeći CSS svojstvo :inline-block pravimo linkove inline blokove. Ovo je posebno neophodno da bismo mogli odrediti tačnu visinu linkova koja odgovara visini slika.
2. Uklonite podvučenu liniju i poravnajte tekst sa središtem (CSS :center). Općenito, u našem slučaju nije potrebno centrirati tekst, jer se veze prilagođavaju veličini teksta u njima i jednostavno nema gdje da se poravnaju. Ali ako trebate povećati širinu veza (na primjer, do 150px), onda će vam ovo poravnanje dobro doći.
3. Da bismo promijenili izgled veza kada su ispod kursora miša, stilovima sa CSS pseudoklasom dodajemo dodatne selektore u kojima označavamo naše dijelove slika, ali bez sjene.

Za IE6 i IE7 uključujemo dodatne stilove sa uslovni komentari, ali malo mijenjamo CSS kod i činimo ga drugačijim od onog koji se koristi načini za zaokruživanje uglova:

1. Suština promjene je da uz pomoć izraza integrišemo sve iste dvije oznake unutar linkova, ali samo bez atributa koji sadrže stilove. Umjesto toga, dodamo klase "left_bok" i "right_bok" u oznake, a mi izvlačimo stilove za njih i pišemo ispod. Ovi stilovi su skoro potpuno isti kao u glavnom CSS kodu, ali ovdje sve slike idu kao oznake pozadine.

Zaobljeni uglovi veze (opcija dva)

Pogledajmo još jedan primjer zaokruživanja uglova veza, ali koristeći četiri odvojene slike uglova.

Opis primjera

I ovdje nećemo govoriti o samom zaokruživanju, već ćemo samo naznačiti karakteristične tačke.

1. Koristeći CSS svojstvo :inline-block, konvertujemo veze u inline blokove. Zatim uklonite podvučenu crtu s njih, dodajte okvir i poravnajte tekst sa središtem.
2. Budući da se pseudoelementi koje koristimo za zaokruživanje uglova nalaze unutar linkova, njihov sadržaj je takođe poravnat po sredini, pa se uglovi slike koje dodaje CSS svojstvo ne postavljaju u uglove, kako želimo. Da bismo ovo popravili, dodajemo im :left, vraćajući vrijednost koju pretraživači koriste po defaultu.

Podcrtajte za blok elemente kao što je oznaka

može se uraditi na dva načina. Na primjer, postavite liniju ispod teksta na cijelu širinu bloka, bez obzira na količinu teksta. I također podvlačenje raditi samo u tekstu. Pogledajmo sljedeće obje opcije.

Linija ispod teksta za punu širinu bloka

Da biste kreirali liniju ispod teksta, elementu dodajte svojstvo stila ivice dna, njegova vrijednost je istovremeno širina linije, stil i boja (primjer 1).

Primjer 1: Linija pune širine

HTML5 CSS 2.1 IE Cr Op Sa Fx

Primer teksta

Udaljenost od reda do teksta može se podesiti pomoću svojstva padding-bottom dodavanjem u H1 selektor. Rezultat ovog primjera prikazan je na sl. jedan.

Podvlačenje teksta

Da biste podvukli samo tekst, potrebno je da koristite svojstvo text-decoration sa vrijednošću podcrtavanja, dodajući ga ponovo u H1 selektor (primjer 2).

Primjer 2: Širina od linije do teksta

HTML5 CSS 2.1 IE Cr Op Sa Fx

Primer teksta

Crni naslov privlači pažnju iako je crn umjesto bijelog.

Rezultat ovog primjera prikazan je na sl. 2.

U slučaju korištenja svojstva text-decoration, linija je čvrsto povezana s tekstom, tako da se ne može odrediti njena pozicija i stil.

Sigurno ste primijetili animirani link koji je podvučen na mnogim resursima i htjeli ste znati kako ga implementirati na svoju stranicu. Učiniti lijepim css underline elemenata, ne treba nam veliko znanje, niti povezivanje dodatnih skripti, sve što nam treba je standardni HTML i CSS.

Podvučene varijacije

Podvlačeći veze ili bilo koji drugi element, možete smisliti bilo šta. Donja crta može plutati odozdo, kliziti lijevo ili desno itd. Pogledat ćemo zanimljiviji primjer gdje će podvučena linija ići od centra do rubova, kao što je prikazano u demonstraciji ispod.

demonstracija podvlačenja

HTML

Prvo, napravimo neki element, na primjer, uzmimo A tag. Njegov atribut nam nije važan, jer će većina rada biti posvećena stilovima.

css

Implementacija će se sastojati od dvije linije koje će se kretati od sredine dna elementa do njegovih rubova.

Svojstvo text-decoration odgovorno je za podvlačenje, ali ga ovdje nema smisla koristiti, jer u ovom slučaju nije u potpunosti relevantno za implementaciju naših planova za animaciju. Ne zaboravimo da se svakom elementu može dodijeliti pseudoelement::prije ili::poslije. Stoga ćemo im postaviti sva svojstva i odmah postaviti sljedeće parametre na našu vezu:

A( prikaz: inline-blok; pozicija: relativna; tekstualna dekoracija: nema; )

Na taj način postavljamo protok bloka i pozicioniranje u odnosu na originalno mjesto. Sve ovo je urađeno tako da podvučena crta ne ispuzi iz elementa kada dodijelimo apsolutno pozicioniranje pseudoelementu::before. Nakon toga trebamo postaviti njegovu preciznu lokaciju i veličinu. I ovdje odmah kreiramo prvu polovinu podvlačenja.

A::before( prikaz: blok; pozicija: apsolutna; sadržaj: ""; visina: 2px; širina: 0; boja pozadine: crvena; prijelaz: širina .5s jednostavnog ulaska, lijevo .5s jednostavnog ulaska- van; lijevo: 50%; dolje: 0; )

One. visina podvučene linije bit će 2px, dužina 0, crvena boja, a svojstvo prijelaza je odgovorno za animaciju. I naravno, uvlačenje lijevo je 50%, tj. centralna tačka. Izvodimo skoro iste radnje sa pseudoelementom ::after:

A::after( prikaz: blok; pozicija: apsolutna; sadržaj: ""; visina: 2px; širina: 0; boja pozadine: crvena; prijelaz: širina 0,5 s lako ulazak; lijevo: 50%; dno: 0;)

A:hover::before( širina: 50%; lijevo: 0; ) a:hover::after( širina: 50%; )

Treba napomenuti da je ovo samo jedan od načina da se ova ideja implementira. Isto možete učiniti sa samo jednim pseudoelementom::before. Pretplatite se na članke i predložite teme za članke.

Pozdrav svima koji su gladni novih znanja i čitajte moj blog. Današnju publikaciju želim posvetiti vrlo jednostavnoj temi, koja ipak redovito postavlja brojna pitanja početnika: "Kako ukloniti ili dodati donju crtu u html-u."

Kao što već znate, sama donja crta se može postaviti ručno, ali veze ih imaju postavljene po defaultu. Zato ću vas u ovom članku podsjetiti kako podvlačiti naslove, reći vam kako postaviti donju liniju na cijelu širinu bloka, kao i kako se nositi sa standardnim formatiranjem linkova. Pa, počnimo!

Istaknimo ovo!

Postoji posebna oznaka para za podvlačenje teksta: riječ.

Međutim, profesionalni dizajneri rasporeda koriste mehanizme stilskih kaskadnih stolova, tj. css za stiliziranje izgleda cijelog . I to je tačno. Ovaj pristup odvaja označavanje od stila, čineći oblikovanje fleksibilnim i praktičnim. Osim toga, lakše je uhvatiti greške (greške) u kodu.

Sljedeća svojstva se uglavnom koriste za podvlačenje tekstualnog sadržaja: granica I tekst-dekoracija.

Element granica je odgovoran za postavljanje okvira oko navedenog bloka, a također vam omogućava da postavite debljinu i stil linije.

Ova jezička jedinica je prilično fleksibilna, jer možete odrediti formatiranje za pojedinačne strane granice. To se postiže korištenjem svojstava:

1. granica-u pravu(desno)
2. granica-top(iznad)
3. granica-lijevo(lijevo)
4. granica-dnu(dolje)

Takođe uz pomoć granica možete postaviti:

• tačka ( tačkasta)
• isprekidana ( isprekidano)
• linearni ( solidan)
• duplo ( duplo)
• volumetrijski blokovi za uokvirivanje ( utor,umetak,greben ipočetak)

Ne zaboravite da uvijek možete ponoviti postavke stila roditeljskog bloka koristeći ključnu riječ nasljediti.

Hajde sada da razgovaramo o svojstvu css jezika tekst-dekoracija. Ovaj element je odgovoran za dodatnu dekoraciju teksta.

To uključuje:

1. treperi ( blink)
2. red iznad teksta ( overline)
3. precrtani objekti ( linija kroz)
4. stilsko naslijeđe ( nasljediti)
5. poništite sve dodatne dekoracije ( nijedan)
6. podvlačenje koje nam je potrebno ( podvući)

Vrijeme je za vježbu

Sada želim da učvrstite stečeno znanje i praktično isprobate primjer koda koji sam dao. Za one koji su upoznati sa ovom temom, također će biti od koristi. Kao što svi znamo: "Ponavljanje je majka učenja!".

Ovaj kod implementira izmijenjeni stil veza, a također postavlja podvlaku naslova na punu širinu bloka.

Naslovite tekst podvučenim naslovom

Na ovoj napomeni završavam tutorijal. Pokriva sve potrebne alate za podvlačenje tekstualnog sadržaja, znajući koje možete kreirati vlastite opcije dizajna za web stranice.

Ne zaboravite da se pridružite redovima mojih pretplatnika, jer je pred vama još mnogo zanimljivih i korisnih tema, a također podijelite link bloga sa svojim prijateljima. Ćao ćao!

S poštovanjem, Roman Chueshov