Pseudo-elementer er en af ​​de mere avancerede vælgere, der er tilgængelige til brug i CSS. Hovedformålet bag disse vælgere er at skabe unik styling uden at ændre HTML-dokumentet, der bruges til at skabe den grundlæggende struktur på en given webside.

Sådan bruges pseudo-elementer i CSS.

Almindelige Pseudo-elementer

Der er en omfattende liste over pseudo-elementer, der er tilgængelige for at gøre det lettere for en webudvikler. Nogle af disse pseudo-elementer inkluderer:

• Før
• Efter
• Baggrund
• Første linje
• Første bogstav

I specifikke situationer vil nogle pseudo-elementer vise sig at være mere egnede end andre, men den ene ting, der forbliver konstant, er den generelle struktur til brug af ethvert pseudo-element.

Pseudo-elementer Struktureksempel

vælger:: pseudo-element {
/ * css kode * /
} 

Selvom du kan brug et HTML-element som en vælger, anbefales det, at du bruger en klasse eller en id for at undgå at målrette mod utilsigtede elementer i dit layout. Elementet, stilen eller dataene, som du gerne vil indsætte i den ønskede position, skal placeres mellem de krøllede seler.

Pseudoelementerne før og efter er de mest populære på listen, og i betragtning af at der er mange praktiske måder at bruge dem på - det er ikke svært at se hvorfor.

Brug af Before Pseudo-elementet i CSS

Selvom det ikke er umuligt, er det svært at overlejre billeder med læsbar tekst i CSS. Dette skyldes for det meste, at billedet og teksten indtager den samme position på en webside.

Det er relativt let at send et billede til baggrunden for en gruppe af tekst, men når billedet er for lyst, har det en tendens til at overvælde teksten, der er oven på det. I disse tilfælde er det næste trin at forsøge at gøre billedet mindre uigennemsigtigt ved hjælp af opacitetsegenskaben.

Det eneste problem er, at da billedet og teksten indtager den samme position, bliver teksten også noget gennemsigtig.

En af de få effektive måder at løse dette problem er ved at bruge det før pseudo-element.

Brug af eksemplet Before Pseudo-element

.landingPage {
/ * Arrangerer teksten i billedoverlayet * /
display: flex;
flex-retning: kolonne;
retfærdiggør-indhold: center;
align-items: center;
tekstjustering: center;
/ * indstiller siden til at justere til forskellige skærmstørrelser * /
højde: 100vh;
}
.landingPage:: før {
indhold:'';
/ * importerer et billede * /
baggrund: url ( https://source.unsplash.com/_1EYIHRG014/1600x900)
ikke gentag center / dæksel;
/ * placerer et overlay oven på billedet * /
uigennemsigtighed: 0,4;
/ * gør billedet synligt * /
position: absolut;
top: 0;
venstre: 0;
bredde: 100%;
højde: 100%;
}

Koden ovenfor er oprettet til at blive brugt i fællesskab med HTML landingPage-klassen nedenfor. Som vist i koden ovenfor kan vi bruge det før pseudo-element til at målrette mod billedet og bruge opacitetsegenskaben på det, før billedet kombineres med teksten.

Brug af Før-pseudo-elementet


Dette er resultatet af brugen af ​​det før pseudo-element
til overlay og billede med læsbar tekst.

Dette vil resultere i, at der placeres et overlay på billedet og tydelig tekst vises øverst som vist på billedet nedenfor:

Brug af After Pseudo-elementet i CSS

En praktisk anvendelse til det efterfølgende pseudo-element er at hjælpe med oprettelsen af ​​en HTML-form. De fleste formularer oprettes med et sæt felter, der kræver data for at formularen skal indsendes med succes.

En måde at indikere, at et felt i en form kræver data, er ved at placere en stjerne efter etiketten for dette felt. After pseudo-elementet giver dig en praktisk måde at gøre dette på.

Brug af eksemplet efter Pseudo-element

. kræves:: efter {
indhold: '*';
farve: rød;
} 

Indsættelse af koden ovenfor i CSS-sektionen i din formular vil sikre, at hver etiket, der indeholder den krævede klasse, efterfølges direkte af en rød stjerne. After pseudo-elementet er også praktisk i dette eksempel, fordi det hjælper med at adskille styling fra struktur (hvilket altid er ideelt til softwareudvikling.)

Indholdsejendommen

Som vist i eksemplet efter pseudo-element ovenfor, er egenskaben indhold det værktøj, der bruges til at indsætte nyt indhold på en webside. Denne egenskab bruges kun med de før og efter pseudoelementer.

Det er vigtigt at bemærke, at selvom der ikke er noget indhold tilgængeligt, der skal føjes til indholdsejendommen (som i eksempelet før pseudo-element ovenfor), er du stadig forpligtet til at bruge indholdsejendommen inden for parametrene for det før eller efter pseudo-element for at få dem til at fungere som beregnet.

Nu kan du bruge Pseudo-elementer i CSS

I denne artikel lærte du, hvordan du identificerer og brugte pseudo-elementer i dine CSS-programmer. Du blev introduceret til før og efter pseudo-elementer og fik praktiske måder at bruge begge dele på. Du var også i stand til at se, hvorfor egenskaben indhold er nødvendig for en vellykket brug af de før og efter pseudo-elementer.

10 enkle CSS-kodeeksempler, du kan lære på 10 minutter

Vil du vide mere om brug af CSS? Prøv disse grundlæggende CSS-kodeeksempler til at begynde med, og anvend dem derefter på dine egne websider.

Læs Næste

Om forfatteren