CSS Before ja CSS After - kuidas kasutada sisuvara

contentVara CSS määratleb toiteelemendi. Võib-olla olete kuulnud, et see omadus kehtib ainult ::beforeja ::afterpseudoelementide kohta. Selles artiklis uurime contentvara erinevaid kasutusjuhtumeid , sealhulgas väljaspool pseudoelemente.

Eelduseks

Kuna enamik kasutusjuhtumid contentvara kaasata pseudo-elemendid, pakun, et sa olema tuttav kuidas ::beforeja ::afterpseudo-elemendid tööd. Siin on suurepärane artikkel, mis aitab teil kiirust suurendada:

  • CSS-i pseudoelemendid - enne ja pärast selektoreid selgitatud

Aktsepteeritud väärtused

Kõigepealt vaatame üle kõik contentkinnisvara aktsepteeritud väärtused .

  • normal: See on vaikeväärtus. Arvutab, nonekui seda kasutatakse pseudoelementidega.
  • none: Pseudoelementi ei genereerita.
  • : Määrab sisu määratud stringi. See string võib sisaldada Unicode'i põgenemisjärjestusi. Näiteks autoriõiguse sümbol: \\000A9.
  • : Seab sisu pildiks või gradiendiks, kasutades url()või linear-gradient().
  • open-quote| close-quote: Määrab sisule quotesatribuudilt viidatud sobiva tsitaatide tähemärgi .
  • no-open-quote| no-close-quote: Eemaldab valitud elemendilt pakkumise, kuid suurendab või vähendab siiski quotesatribuudilt viidatud pesitsustaset .
  • attr(*attribute*): Määrab valitud elemendi valitud atribuudi stringi väärtuseks sisu.
  • counter(): Määrab sisu väärtuseks a counter, tavaliselt arv.

String

Üks põhilisemaid näiteid on stringi sisu lisamine enne või pärast elementi. Selles näites lisame lingi ette lingi sümboli ja lingi URL selle järele.

a::before { content: "\\1F517 "; } a::after { content: " (" attr(href) ")"; } 

Pange tähele ruumi ::beforepseudoelemendis Unicode'i märgi järel ja pseudoelemendis esimese sulgude ees ::after. See loob ruumi nende ja vanemelemendi vahele.

Teise võimalusena võite eraldamise lisamiseks lisada pseudoelemendid paddingvõi marginnende juurde.

Põhipakkumised

Atribuudiga contentsaate lisada jutumärke enne ja / või pärast elemente. Nüüd on meil HTML-is silt olemas. See lisab ka selle sisule jutumärgid. Kuid contentkinnisvara abil saame rakendamise üle rohkem kontrollida.

Siin on kõige elementaarsem näide jutumärkide lisamisest:

Saate seda saavutada ka HTML-märgendi abil . Kuid võib-olla tahame hinnapakkumist kujundada teisiti. Nii et lisame ainult avapakkumise, mitte lõpu tsitaadi. Ja stiliseerime ka avapakkumise.

p { position: relative; font-size: 3rem; margin: 4rem; } p::before { content: open-quote; position: absolute; left: -3.5rem; top: -2rem; font-size: 8rem; color: rgba(0, 0, 0, 0.5) } 

Tulemus:

Pilt, mis näitab lõigu vasakus ülanurgas ühte stiilis tsitaati

Täpsemad hinnapakkumised

Me ei saa ka määrata, kus me ei ole soovi hinnapakkumisi. Näiteks võite tsiteerida kedagi, kes tsiteerib teist inimest. Nii et teil oleks jutumärkides jutumärke, mis võivad lugejale segadust tekitada.

Allpool asuvas CodePenis kasutame HTML- silte, täpsustades seejärel, millised sildid ei tohiks jutumärke kuvada.

Esmapilgul võite arvata, et peaksime lihtsalt märgendi vajaduse korral eemaldama . Kuid täpsustades, kus pakkumine ei tohiks olla, suurendab või vähendab quotesatribuudilt viidatud pesitsustaset .

Selle selgitamiseks peame quotesomandist aru saama . See on lihtsalt märkide "massiiv", mida tuleks tsiteerimisel kasutada. Siin on näide:

q { quotes: '“' '”' '‘' '’' '“' '”'; } 

Need on jutumärkide komplektid. Esimest komplekti kasutatakse hinnapakkumiste ülatasemel. Teist komplekti kasutatakse esimese sisestatud pakkumise jaoks. Ja kolmandat komplekti kasutatakse teise pesastatud pakkumise jaoks. Ja nii edasi, kui komplektis oleks rohkem komplekte.

Nüüd, kui oleme quotesomadusest aru saanud , oskan selgitada, kuidas no-open-quoteja no-close-quoteomadused toimivad.

Igale hinnapakkumiste tasemele saame määrata pakkumiste jaoks kasutatavad erinevad märkide komplektid. Täpsustades, kus pakkumine ei tohiks olla, suurendab või vähendab quotesatribuudilt viidatud pesitsustaset .

Vaadake allpool toodud näidet. Näete, et hinnapakkumiste teine ​​tase on vahele jäetud.

Atribuudid

Atribuute saab kasutada sisu HTML-ist CSS-i contentatribuudi edastamiseks. Me kasutasime seda tegelikult juba linginäites, kus kasutasime hrefatribuuti URL-i stringi lisamiseks meie sisusse.

Selle jaoks on ideaalne kasutamisjuhend tööriistavihje. titleHTML-i elemendile saate lisada atribuudi, et hõljumisel oleks lihtne, sisseehitatud tööriistavihje. Kuid selle kohandamiseks saame oma HTML-märgendis kasutada atribuuti ja seejärel kasutada contentatribuuti tööriistavihje lisamiseks.

Selles näites kasutame data-tooltipoma HTML-elemendi atribuuti väärtuse edastamiseks meie tööriistavihjesse. Tööriistavihje kursori jaoks määrame contentväärtuseks "", nagu contenton vaja a ::beforevõi ::afterpseudoelemendi renderdamiseks .

Loendurid

Funktsioon counter()CSS tagastab stringi, mis tähistab nimetatud loenduri praegust väärtust. Järgmises näites on meil järjestatud loend, kuhu lisame sisu a abil counter.


    
    ol { counter-reset: exampleCounter; } li { counter-increment: exampleCounter; } li::after { content: "[" counter(exampleCounter) "] == [" counter(exampleCounter, upper-roman) "]"; } 

    counterFunktsioonist liiga põhjalikult süvenemata peame kõigepealt olelemendi loenduri algatama . Me võime seda nimetada nii, nagu sooviksime. Siis käskime loendurit iga lielemendi juurdekasvuks . Ja lõpuks, seadsime contentkohta li::after.

    Siin on tulemus:

    Tellitud loend

    Selle abil saate kohandada iga loendikirje sisu, mis vajab vastavat numbrit. Või võite seda kasutada loendiüksuse enda kohandamiseks. Näiteks võite eemaldada vaikenumeratsiooni ja rakendada kohandatud stiilis numeratsioonisüsteemi.

    Kujutised

    Atribuudiga saab kasutada pilte ja gradiente content. See on üsna sirgjooneline. Siin on näide, mis kasutab mõlemat:

    Juurdepääsetavuse huvides on ka võimalus lisada pildile alternatiivne tekst. Seda funktsiooni ei toetata siiski täielikult.

    content: url(//unsplash.it/200/200) / "Alternative Text Here"; 
    Märkus. Seda ei toetata Firefoxis, IE-s ja Safaris. Samuti ei tööta gradient Firefoxis.

    Väljaspool pseudoelemente

    Täpselt nii! Atribuuti saab kasutada contentväljaspool pseudoelemente ::beforeja ::after. Kuigi selle kasutamine on piiratud ja pole kõigis brauserites täielikult ühilduv.

    Kõige ühilduvam juhtum oleks elemendi asendamine.

     codeSTACKr 
    #replace { content: url(""); width: 100%; } 
    Märkus: IE ei toeta asendamist.

    Järeldus

    Enamasti näete content: ""neid ::beforeja ::afterpseudoelementides. Kuid contentvaral on palju kasulikke rakendusi.

    Parim kasutus on minu arvates selle kasutamine hulgielementide värskendamiseks. Kui soovite enne oma saidi igat linki lisada ikooni, oleks selle contentatribuudi kaudu palju lihtsam lisada kui HTML-dokumendi igale elemendile.

    Täname lugemast!

    Täname, et lugesite seda artiklit. Loodetavasti on see aidanud teil paremini mõista, kuidas contentvara CSS-is töötab.

    Jesse Hall (codeSTACKr)Olen Jesse Texasest. Vaadake minu muud sisu ja andke mulle teada, kuidas saan teid aidata teie veebiarendajaks saamisel.

    • Telli Minu YouTube
    • Ütle Tere! Instagram | Twitter
    • Registreeru minu uudiskirja saamiseks