CSS før og CSS efter - Sådan bruges indholdsejendommen

Den contentejendom i CSS definerer indholdet af et element. Du har måske hørt, at denne egenskab kun gælder for ::beforeog ::afterpseudo-elementer. I denne artikel undersøger vi forskellige brugssager for contentejendommen, herunder uden for pseudo-elementer.

Forudsætning

Da størstedelen af ​​brugssagerne for contentejendommen involverer pseudoelementer, vil jeg foreslå, at du kender til, hvordan ::beforeog ::afterpseudoelementerne fungerer. Her er en god artikel, der gør dig hurtigere:

  • CSS-pseudoelementer - før og efter vælgerne forklaret

Accepterede værdier

Lad os først se på alle de accepterede værdier for contentejendommen.

  • normal: Dette er standardværdien. Beregner til nonenår det bruges med pseudo-elementer.
  • none: Et pseudo-element genereres ikke.
  • : Indstiller indholdet til den angivne streng. Denne streng kan indeholde Unicode escape-sekvenser. For eksempel, symbol copyright: \\000A9.
  • : Indstiller indholdet til et billede eller en gradient ved hjælp af url()eller linear-gradient().
  • open-quote| close-quote: Indstiller indholdet til det relevante citattegn, der henvises til fra quotesejendommen.
  • no-open-quote| no-close-quote: Fjerner et tilbud fra det valgte element, men øger eller formindsker stadig det nestingsniveau, der henvises til fra quotesejendommen.
  • attr(*attribute*): Indstiller indholdet som strengværdi for de valgte elementers valgte attribut.
  • counter(): Indstiller indholdet som værdien af ​​a counter, normalt et tal.

Snor

Et af de mest basale eksempler er brugen af ​​at tilføje strengindhold før eller efter et element. I dette eksempel tilføjer vi et link symbol før et link og tilføjer URL'en til linket efter det.

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

Læg mærke til mellemrummet efter Unicode-tegnet i ::beforepseudo-elementet og før den første parentes i ::afterpseudo-elementet. Dette skaber plads mellem disse og det overordnede element.

Alternativt kan du tilføje paddingeller margintil pseudoelementerne for at tilføje adskillelse.

Grundlæggende tilbud

Med contentejendommen kan du tilføje tilbud før og / eller efter elementer. Nu i HTML har vi tagget. Dette tilføjer også tilbud omkring dets indhold. Men med contentejendommen kan vi have mere kontrol over implementeringen.

Her er det mest basale eksempel på tilføjelse af tilbud:

Du kan også opnå dette ved at bruge HTML-tagget . Men måske vil vi style citatet forskelligt. Så lad os kun tilføje åbningstilbudet og ikke det afsluttende tilbud. Og lad os også style åbningstilbudet.

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) } 

Resultatet:

Billede, der viser et enkelt stylet citat øverst til venstre i afsnittet

Avancerede tilbud

Vi kan også specificere, hvor vi ikke vil have tilbud. For eksempel kan du citere en person, der citerer en anden person. Så du ville have tilbud inden for tilbud, som kan blive forvirrende for læseren.

I CodePen nedenfor bruger vi HTML- tags og angiver derefter, hvilke tags der ikke skal vise citaterne.

Ved første øjekast tror du måske, at vi bare skal fjerne tagget, hvor det er nødvendigt. Men ved at specificere, hvor et tilbud ikke stadig skal være stigninger eller nedskridt, rediger det indlejrede niveau fra quotesejendommen.

For at forklare dette er vi nødt til at forstå quotesejendommen. Dette er simpelthen et "array" af tegn, der skal bruges, når du citerer. Her er et eksempel:

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

Dette er sæt af tilbud. Det første sæt bruges til det øverste niveau af tilbud. Det andet sæt bruges til det første nestede tilbud. Og det tredje sæt bruges til det andet nestede tilbud. Og så videre, hvis der var flere sæt inkluderet.

Nu hvor vi forstår quotesejendommen, kan jeg forklare, hvordan egenskaberne no-open-quoteog no-close-quoteegenskaberne fungerer.

For hvert citatniveau kan vi tildele forskellige sæt tegn til brug for citaterne. Ved at specificere, hvor et tilbud ikke stadig skal være stigninger eller reduktioner, skal det nestingsniveau, der henvises til fra quotesejendommen.

Se eksemplet nedenfor. Du vil se, at det andet niveau af citater springes over.

Egenskaber

Attributter kan bruges til at overføre indhold fra HTML til CSS- contentejendommen. Vi har faktisk brugt dette allerede i linkeksemplet, hvor vi brugte hrefattributten til at inkludere URL-strengen som en del af vores indhold.

En perfekt brugssag til dette er en værktøjstip. Du kan tilføje en titleattribut til et element i HTML for at have et simpelt, indbygget værktøjstip på svævning. Men for at tilpasse dette kan vi bruge en dataattribut på vores HTML-tag og derefter bruge contentegenskaben til at tilføje et værktøjstip.

I dette eksempel bruger vi attributten data-tooltipfra vores HTML-element til at overføre værdien til vores værktøjstip. For markøren til værktøjstip indstiller vi den contenttil "", som contentkrævet for at gengive et ::beforeeller ::afterpseudo-element.

Tællere

Den counter()CSS funktion returnerer en streng, der repræsenterer den aktuelle værdi af den navngivne tæller. I det følgende eksempel har vi en ordnet liste, hvor vi tilføjer indhold ved hjælp af en counter.


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

    Uden at gå for dybt i counterfunktionen skal vi først starte tælleren på olelementet. Vi kan navngive dette, hvad vi vil. Derefter beder vi tælleren om at øge hvert lielement. Og endelig, vi indstille contentden li::after.

    Her er resultatet:

    Bestilt liste

    Du kan bruge dette til at tilpasse indhold inden for hvert listeelement, der har brug for et tilsvarende nummer. Eller du kan bruge dette til at tilpasse selve listen. For eksempel kan du fjerne standardnummereringen og implementere et tilpasset nummereringssystem.

    Billeder

    Billeder og forløb kan bruges med contentejendommen. Dette er ret ligetil. Her er et eksempel, der bruger begge:

    For tilgængelighed er der også mulighed for at tilføje alternativ tekst til billedet. Denne funktion understøttes dog ikke fuldt ud.

    content: url(//unsplash.it/200/200) / "Alternative Text Here"; 
    Bemærk: Dette understøttes ikke i Firefox, IE og Safari. Gradienten fungerer heller ikke i Firefox.

    Uden for Pseudo Elements

    Det er rigtigt! Du kan bruge contentejendommen uden for pseudoelementerne ::beforeog ::after. Skønt brugen er begrænset og ikke fuldt kompatibel i alle browsere.

    Den mest kompatible brugssag ville være udskiftning af et element.

     codeSTACKr 
    #replace { content: url(""); width: 100%; } 
    Bemærk: Udskiftning understøttes ikke i IE.

    Konklusion

    De fleste gange vil du se content: ""fundet i ::beforeog ::afterpseudo-elementer. Men contentejendommen har mange nyttige applikationer.

    Den bedste anvendelse efter min mening er at bruge den til opdatering af bulkelementer. Hvis du vil tilføje et ikon før hvert link på dit websted, ville det være meget lettere at tilføje det gennem contentejendommen end at tilføje det til hvert element i HTML-dokumentet.

    Tak for læsningen!

    Tak fordi du læste denne artikel. Forhåbentlig har det hjulpet dig med bedre at forstå, hvordan contentejendommen fungerer i CSS.

    Jesse Hall (codeSTACKr)Jeg er Jesse fra Texas. Tjek mit andet indhold, og fortæl mig, hvordan jeg kan hjælpe dig på din rejse til at blive webudvikler.

    • Abonner på min YouTube
    • Sig hej! Instagram | Twitter
    • Tilmeld dig mit nyhedsbrev