Dekorativa mönster med pseudoelement
Skapa dekorativa former, avdelare och överlägg med ::before och ::after utan extra HTML.
Dekorativa mönster med pseudoelement är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.
Principen om dekoration med enbart CSS
Pseudoelement möjliggör avancerade dekorativa effekter utan extra HTML. Målet är noll div-element för dekoration – all visuell utsmyckning ska finnas i CSS.
CSS-triangel
Skapa trianglar med element utan storlek och genomskinliga kantlinjer:
<div class="triangle"></div>Verktygstips med pil
En pil för ett verktygstips med hjälp av ::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>Diagonal avdelare för avsnitt
En lutande avdelare mellan avsnitt med skew eller clip-path på ::after:
<div class="section" style="background:linear-gradient(135deg,#4f8cff,#7ee787);height:120px;position:relative;"></div>Dekorativa understrykningar
Animerade understrykningseffekter med hjälp av ::after:
<a href="#">Hover me (underline animates in on :hover)</a>Bricka med ::after
En överlagrad aviseringsbricka utan extra HTML-element:
<span class="nav-icon" data-count="3" style="position:relative;display:inline-block;font-size:1.5rem;margin:16px;">🔔</span>Tonad överlagring på bilder
En mörk tonad överlagring över bilder för att göra texten lättare att läsa:
<div class="card-image" style="width:100%;height:160px;background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>Bockmarkering med ::before
En anpassad bockmarkering för kryssrutor, ritad med CSS-kantlinjer:
<div class="custom-check" style="width:20px;height:20px;background:#34c759;border-radius:4px;padding:2px;"></div>Banderoll
En bandeffekt på kort med hjälp av ::before och negativ positionering:
<div class="card featured" style="position:relative;background:#fff;border:1px solid #ddd;padding:16px;width:200px;">Featured product</div>Skimrande laddningseffekt
En skimrande CSS-skelettladdning utan JavaScript:
<div class="skeleton" style="width:100%;height:60px;border-radius:6px;"></div>Snabb kontroll
Vilken kombination av egenskaper skapar en uppåtriktad triangel med enbart CSS?
Sammanfattning
Pseudoelement möjliggör avancerade dekorativa mönster utan extra HTML: pilar, överlagringar, animerade understrykningar, brickor, banderoller och skimrande effekter. Alla bygger på content: "" + position: absolute + kreativ användning av borders, clip-path och transforms.
Lär dig CSS med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Dekorativa mönster med pseudoelement” gratis?
Ja – hela texten till ”Dekorativa mönster med pseudoelement” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Dekorativa mönster med pseudoelement”?
Skapa dekorativa former, avdelare och överlägg med ::before och ::after utan extra HTML. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig CSS Academy?
Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Dekorativa mönster med pseudoelement”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här CSS Academy-lektionen?
Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Innehåll med ::before och ::after
- ::placeholder ::selection och ::marker
- CSS-räknare med ::before
- Dekorativa mönster med pseudoelement