Innhold med ::before og ::after
Sett inn generert innhold før eller etter elementer ved hjelp av ::before og ::after sammen med content-egenskapen.
Innhold med ::before og ::after er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva er pseudoelementer?
Pseudoelementer oppretter virtuelle elementer som styles som om de var en del av DOM. De bruker doble kolon ::. De mest brukte er ::before og ::after.
::before og ::after
::before setter inn generert innhold før innholdet i et element. ::after setter det inn etter innholdet. Begge krever egenskapen content for å vises.
<span class="element">Text with generated content</span>Egenskapen content
Egenskapen content godtar:
- En streng:
content: "text" - En tom streng:
content: ""(vanlig for dekorative former) - En URL:
content: url("icon.svg") - En teller:
content: counter(step) - attr():
content: attr(data-tooltip)
Dekorative anførselstegn
Legg til typografiske anførselstegn uten å legge dem til i HTML:
<blockquote>Design is not just what it looks like — design is how it works.</blockquote>Former med tomt content
Ved å angi content: "" sammen med plassering og dimensjoner kan De opprette dekorative former uten ekstra HTML:
<div class="card" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;margin-top:12px;">Card with a colored top bar drawn by ::before</div>Clearfix med ::after
Den klassiske clearfix-metoden bruker ::after til å oppheve flyt uten ekstra markering:
<div class="clearfix" style="border:1px solid #ccc;">
<div style="float:left;width:50%;background:#4f8cff22;padding:8px;">Floated column</div>
</div>Tooltip med ::after
CSS-basert tooltip som bare bruker CSS, med ::after og attr():
<span data-tooltip="Helpful hint" style="position:relative;display:inline-block;margin-top:24px;">Hover target</span>Ikon med content: url()
Sett inn et lite ikon før lenker med content: url():
<a href="https://example.com" target="_blank" rel="noopener">External link</a>Begrensninger ved pseudo-elementer
Pseudo-elementer finnes ikke i DOM-en. De er:
- Ikke mulig for brukere å merke eller søke etter
- Ikke tilgjengelige for skjermlesere som standard
- Ikke mulig å målrette med JavaScript
Plasser aldri viktig innhold i generert innhold – bruk dem bare til dekorative formål.
Ett kolon kontra to koloner
Ett kolon (:before) var syntaksen i CSS2. To koloner (::before) er standarden i CSS3, som skiller pseudo-elementer fra pseudo-klasser. Begge fungerer i moderne nettlesere, men bruk to koloner i ny kode.
Hvilke elementer støtter ::before/::after
Erstattede elementer (img, input, select, video) kan ikke ha pseudo-elementer fordi de ikke har noe innholdsområde som pseudo-elementet kan settes inn i. Bruk i stedet et omsluttende element til dekorasjon.
Sjekk deg selv
Hvilken content-verdi kreves for et dekorativt ::before-pseudo-element uten synlig tekst?
Oppsummering
::before og ::after setter inn generert innhold rundt et elements faktiske innhold. Egenskapen content er obligatorisk. Bruk dem til dekorative former, ikoner, anførselstegn og tooltips – men aldri til meningsbærende innhold som brukere må kunne få tilgang til eller lese.
Lær deg CSS med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «Innhold med ::before og ::after» gratis?
Ja – hele teksten i «Innhold med ::before og ::after» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Innhold med ::before og ::after»?
Sett inn generert innhold før eller etter elementer ved hjelp av ::before og ::after sammen med content-egenskapen. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med CSS Academy?
Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «Innhold med ::before og ::after»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?
Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Innhold med ::before og ::after
- ::placeholder ::selection og ::marker
- CSS-tellere med ::before
- Dekorative mønstre med pseudo-elementer