CSS Academy · Lektion

Dekorative mønstre med pseudo-elementer

Opret dekorative former, skillelinjer og overlays med ::before og ::after uden ekstra HTML.

Lektion 4 af 412 trin

Dekorative mønstre med pseudo-elementer er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.

Filosofien bag dekoration udelukkende med CSS

Pseudo-elementer gør det muligt at skabe avancerede dekorative effekter uden ekstra HTML. Målet er nul div-elementer til dekoration — al visuel udsmykning placeres i CSS.

CSS-trekant

Opret trekanter ved hjælp af elementer uden størrelse og gennemsigtige kanter:

<div class="triangle"></div>

Pil til værktøjstip

En pil til et værktøjstip ved hjælp af ::before:

<div class="tooltip" style="position:relative;display:inline-block;background:#333;color:#fff;padding:6px 12px;border-radius:4px;margin-top:16px;">Tooltip text</div>

Skrå sektionsadskiller

En skrå adskillelse mellem sektioner ved hjælp af skew eller clip-path på ::after:

<div class="section" style="background:linear-gradient(135deg,#4f8cff,#7ee787);height:120px;position:relative;"></div>

Dekorative understregninger

Animerede understregningseffekter ved hjælp af ::after:

<a href="#">Hover me (underline animates in on :hover)</a>

Mærke med ::after

Et overlejret notifikationsmærke uden ekstra HTML-elementer:

<span class="nav-icon" data-count="3" style="position:relative;display:inline-block;font-size:1.5rem;margin:16px;">&#128276;</span>

Farveforløbsoverlejring på billeder

En mørk overlejring med farveforløb over billeder, så teksten bliver lettere at læse:

<div class="card-image" style="width:100%;height:160px;background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>

Flueben med ::before

Et brugerdefineret flueben til en afkrydsningsboks, tegnet med CSS-kanter:

<div class="custom-check" style="width:20px;height:20px;background:#34c759;border-radius:4px;padding:2px;"></div>

Båndbanner

En båndeffekt på kort ved hjælp af ::before med negativ positionering:

<div class="card featured" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;width:200px;">Featured product</div>

Skinnende indlæsningseffekt

Et CSS-skelet med skinnende indlæsningseffekt uden JavaScript:

<div class="skeleton" style="width:100%;height:60px;border-radius:6px;"></div>

Hurtig kontrol

Hvilken kombination af egenskaber opretter en opadpegende trekant udelukkende med CSS?

Besvar den i den interaktive lektion

Opsamling

Pseudo-elementer muliggør avancerede dekorative mønstre uden ekstra HTML: pile, overlejringer, animerede understregninger, mærker, bånd og skinnende effekter. Alle er baseret på content: "" + position: absolute + kreativ brug af kanter, clip-path og transformationer.

Gratis at komme i gang

Lær CSS med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 40
Lektioner: 159

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Dekorative mønstre med pseudo-elementer” gratis?

Ja — hele teksten til “Dekorative mønstre med pseudo-elementer” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Dekorative mønstre med pseudo-elementer”?

Opret dekorative former, skillelinjer og overlays med ::before og ::after uden ekstra HTML. Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på CSS Academy?

Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Dekorative mønstre med pseudo-elementer”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne CSS Academy-lektion?

Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til CSS Academy