CSS før og CSS etter - Hvordan bruke innholdselementet

Den contentegenskap i CSS definerer innholdet av et element. Du har kanskje hørt at denne egenskapen bare gjelder for ::beforeog ::afterpseudo-elementene. I denne artikkelen vil vi utforske ulike brukssaker for contenteiendommen, inkludert utenfor pseudoelementer.

Forutsetning

Siden de fleste brukssakene for contenteiendommen involverer pseudo-elementer, vil jeg foreslå at du blir kjent med hvordan ::beforeog ::afterpseudo-elementene fungerer. Her er en flott artikkel for å få deg opp i fart:

  • CSS Pseudo-Elements - Før og etter velgere forklart

Aksepterte verdier

La oss først se på alle de aksepterte verdiene til contenteiendommen.

  • normal: Dette er standardverdien. Regner med nonenår det brukes med pseudoelementer.
  • none: Et pseudo-element blir ikke generert.
  • : Angir innholdet til den angitte strengen. Denne strengen kan inneholde Unicode escape-sekvenser. For eksempel, rettighets symbol: \\000A9.
  • : Angir innholdet til et bilde eller en gradering ved hjelp av url()eller linear-gradient().
  • open-quote| close-quote: Angir innholdet til riktig tilbudstegn som det refereres til fra quoteseiendommen.
  • no-open-quote| no-close-quote: Fjerner et sitat fra det valgte elementet, men fremdeles øker eller dekker nestingsnivået det er referert til fra quoteseiendommen.
  • attr(*attribute*): Angir innholdet som strengverdien for de valgte elementene valgte attributtet.
  • counter(): Angir innholdet som verdien av a counter, vanligvis et tall.

String

Et av de mest grunnleggende eksemplene vil være bruken av å legge til strenginnhold før eller etter et element. I dette eksemplet legger vi til et lenkesymbol før en lenke og legger til URL-en for lenken etter den.

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

Legg merke til mellomrommet etter Unicode-tegnet i ::beforepseudo-elementet og før den første parentesen i ::afterpseudo-elementet. Dette vil skape rom mellom disse og foreldreelementet.

Alternativt kan du legge til paddingeller margintil pseudoelementene for å legge til separasjon.

Grunnleggende sitater

Med contenteiendommen kan du legge til anførselstegn før og / eller etter elementer. Nå, i HTML, har vi taggen. Dette vil også legge til sitater rundt innholdet. Imidlertid, med contenteiendommen, kan vi ha mer kontroll over implementeringen.

Her er det mest grunnleggende eksemplet på å legge til tilbud:

Du kan også oppnå dette ved å bruke HTML-koden . Men kanskje vi ønsker å utforme sitatet annerledes. Så la oss bare legge til åpningstilbudet og ikke slutttilbudet. Og la oss også style åpningstilbudet.

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:

Bilde som viser et enkelt sitat øverst til venstre i avsnittet

Avanserte tilbud

Vi kan også spesifisere hvor vi ikke vil ha tilbud. For eksempel kan du sitere noen som siterer en annen person. Så du vil ha sitater innenfor anførselstegn, noe som kan bli forvirrende for leseren.

I CodePen nedenfor bruker vi HTML- koder, og spesifiserer deretter hvilke tagger som ikke skal vise anførselstegnene.

Ved første øyekast tror du kanskje at vi bare burde fjerne taggen der det er nødvendig. Men ved å spesifisere hvor et tilbud ikke fremdeles skal være trinn eller reduksjon, hekker nivået det er referert til fra quoteseiendommen.

For å forklare dette, må vi forstå quoteseiendommen. Dette er ganske enkelt et "utvalg" av tegn som skal brukes når du siterer. Her er et eksempel:

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

Dette er sett med sitater. Det første settet vil bli brukt til det øverste nivået på tilbud. Det andre settet vil bli brukt til det første nestede tilbudet. Og det tredje settet vil bli brukt til det andre nestede sitatet. Og så videre, hvis det var flere sett inkludert.

Nå som vi forstår quotesegenskapen, kan jeg forklare hvordan egenskapene no-open-quoteog no-close-quoteegenskapene fungerer.

For hvert sitatnivå kan vi tilordne forskjellige sett med tegn som skal brukes til anførselstegnene. Ved å spesifisere hvor et tilbud ikke fremdeles skal være inkrement eller reduksjon, hekker nivået det er referert til fra quoteseiendommen.

Ta en titt på eksemplet nedenfor. Du vil se at det andre nivået på sitater blir hoppet over.

Egenskaper

Attributter kan brukes til å overføre innhold fra HTML til CSS- contentegenskapen. Vi brukte dette allerede i lenkeeksemplet der vi brukte hrefattributtet til å inkludere URL-strengen som en del av innholdet vårt.

Et perfekt bruksområde for dette er en verktøytips. Du kan legge til et titleattributt til et element i HTML for å ha en enkel, innebygd verktøytips. Men for å tilpasse dette kan vi bruke et dataattributt på HTML-koden vår og deretter bruke contentegenskapen til å legge til en verktøytips.

In this example, we use the attribute data-tooltip from our HTML element to pass the value into our tooltip. For the pointer of the tooltip, we set the content to "", as content is required to render a ::before or ::after pseudo-element.

Counters

The counter() CSS function returns a string representing the current value of the named counter. In the following example we have an ordered list that we will add content using a counter.


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

    Without getting too in-depth on the counter function, we have to first initiate the counter on the ol element. We can name this whatever we would like. Then we tell the counter to increment on each li element. And lastly, we set the content of the li::after.

    Here's the result:

    Bestilt liste

    Du kan bruke dette til å tilpasse innhold i hvert listeelement som trenger et tilsvarende nummer. Eller du kan bruke dette til å tilpasse selve listen. For eksempel kan du fjerne standardnummereringen og implementere et tilpasset nummereringssystem.

    Bilder

    Bilder og stigninger kan brukes med contenteiendommen. Dette er ganske rett frem. Her er et eksempel som bruker begge:

    For tilgjengelighet er det også et alternativ å legge til alternativ tekst for bildet. Denne funksjonen støttes ikke fullt ut.

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

    Utenfor Pseudo Elements

    Det er riktig! Du kan bruke contenteiendommen utenfor pseudoelementene ::beforeog ::after. Selv om bruken er begrenset og ikke fullt kompatibel i alle nettlesere.

    Den mest kompatible brukssaken ville være å erstatte et element.

     codeSTACKr 
    #replace { content: url(""); width: 100%; }
    Merk: Erstatning støttes ikke i IE.

    Konklusjon

    De fleste ganger vil du se content: ""funnet i ::beforeog ::afterpseudo-elementene. Men contenteiendommen har mange nyttige applikasjoner.

    Den beste bruken etter min mening er å bruke den til å oppdatere bulkelementer. Hvis du vil legge til et ikon før hver lenke på nettstedet ditt, ville det være mye lettere å legge det til gjennom contenteiendommen enn å legge det til hvert element i HTML-dokumentet.

    Takk for at du leste!

    Takk for at du leser denne artikkelen. Forhåpentligvis har det hjulpet deg til bedre å forstå hvordan contenteiendommen fungerer i CSS.

    Jesse Hall (codeSTACKr)Jeg er Jesse fra Texas. Ta en titt på det andre innholdet mitt og gi meg beskjed om hvordan jeg kan hjelpe deg på reisen din til å bli webutvikler.

    • Abonner på YouTube
    • Si hei! Instagram | Twitter
    • Registrer deg for mitt nyhetsbrev