Pseudo-elementer er en av de mer avanserte velgerne som er tilgjengelige for bruk i CSS. Hovedformålet bak disse velgerne er å lage unik styling, uten å endre HTML-dokumentet som brukes til å lage den grunnleggende strukturen til en gitt webside.

Slik bruker du pseudo-elementer i CSS.

Vanlige Pseudo-elementer

Det er en omfattende liste over pseudo-elementer som er tilgjengelige for å gjøre livet til en webutvikler enklere. Noen av disse pseudoelementene inkluderer:

• Før
• Etter
• Bakgrunn
• Første linje
• Første bokstav

I spesifikke situasjoner vil noen pseudo-elementer vise seg å være mer passende enn andre, men den ene tingen som forblir konstant er den generelle strukturen for bruk av et hvilket som helst pseudo-element.

Pseudo-elementer Struktureksempel

velger:: pseudo-element {
/ * css-kode * /
} 

Selv om du kan bruk et HTML-element som en velger, anbefales det at du bruker en klasse eller en id for å unngå å målrette utilsiktede elementer i oppsettet ditt. Elementet, stilen eller dataene du vil sette inn på ønsket posisjon, bør plasseres mellom de krøllete bukkene.

Pseudoelementene før og etter er de mest populære i listen, og gitt at det er mange praktiske måter å bruke dem på - det er ikke vanskelig å se hvorfor.

Bruke Before Pseudo-elementet i CSS

Selv om det ikke er umulig, er det vanskelig å legge bilder med lesbar tekst i CSS. Dette er for det meste fordi bildet og teksten inntar samme posisjon på en webside.

Det er relativt enkelt å sende et bilde til bakgrunnen for en gruppe tekst, men når det bildet er for lyst, har det en tendens til å overvelde teksten som er på toppen av det. I disse tilfellene er neste trinn å prøve å gjøre bildet mindre ugjennomsiktig ved bruk av opacity-egenskapen.

Det eneste problemet er at siden bildet og teksten inntar samme posisjon, vil teksten også bli noe gjennomsiktig.

En av de få effektive måtene å løse dette problemet er ved å bruke før-pseudo-elementet.

Bruke eksempelet Before Pseudo-element

.destinasjonsside{
/ * Ordner teksten på bildeoverlegget * /
skjerm: flex;
flex-retning: kolonne;
rettferdiggjøre innhold: sentrum;
align-items: sentrum;
tekstjustering: sentrum;
/ * stiller inn siden for å justere til forskjellige skjermstørrelser * /
høyde: 100vh;
}
.landingPage:: før {
innhold:'';
/ * importerer et bilde * /
bakgrunn: url ( https://source.unsplash.com/_1EYIHRG014/1600x900)
ikke gjenta senter / deksel;
/ * plasserer et overlegg øverst på bildet * /
opasitet: 0,4;
/ * gjør bildet synlig * /
posisjon: absolutt;
topp: 0;
venstre: 0;
bredde: 100%;
høyde: 100%;
}

Koden ovenfor er opprettet for å brukes sammen med HTML landingPage-klassen nedenfor. Som vist i koden ovenfor, ved å bruke før-pseudo-elementet kan vi målrette bildet og bruke opasitetsegenskapen på det før bildet kombineres med teksten.

Bruke Før pseudo-elementet


Dette er resultatet av å bruke det for pseudo-elementet
til overlegg og bilde med lesbar tekst.

Dette vil resultere i at et overlegg blir plassert på bildet og klar tekst vises på toppen, som vist på bildet nedenfor:

Bruke After Pseudo-elementet i CSS

En praktisk bruk for etter-pseudo-elementet er å hjelpe til med å lage et HTML-skjema. De fleste skjemaer opprettes med et sett med felt som krever data for at skjemaet skal kunne sendes.

En måte å indikere at et felt i et skjema krever data, er å plassere en stjerne etter etiketten for dette feltet. After pseudo-elementet gir deg en praktisk måte å gjøre dette på.

Bruke eksemplet på After Pseudo-element

.krav:: etter {
innhold: '*';
fargen rød;
} 

Hvis du setter inn koden ovenfor i CSS-delen av skjemaet ditt, vil du sikre at hver etikett som inneholder den nødvendige klassen, blir fulgt direkte av en rød stjerne. After pseudo-elementet er også praktisk i dette eksemplet fordi det hjelper å skille styling fra struktur (som alltid er ideell i programvareutvikling.)

Innholdseiendommen

Som vist i eksemplet etter pseudo-elementet ovenfor, er innholdsegenskapen verktøyet som brukes til å sette inn nytt innhold på en webside. Denne egenskapen brukes bare med før- og etter-pseudoelementene.

Det er viktig å merke seg at selv om det ikke er noe innhold tilgjengelig som kan mates til innholdseiendommen (for eksempel i eksemplet før pseudo-element ovenfor), må du fremdeles bruke innholdseiendommen innenfor parametrene til pseudo-elementet før eller etter for å få dem til å fungere som ment.

Nå kan du bruke Pseudo-elementer i CSS

I denne artikkelen lærte du hvordan du identifiserer og brukte pseudo-elementer i CSS-programmene dine. Du ble introdusert for før og etter pseudoelementer og fikk praktiske måter å bruke begge deler på. Du var også i stand til å se hvorfor innholdsegenskapen er nødvendig for vellykket bruk av før og etter pseudoelementer.

10 enkle eksempler på CSS-koder du kan lære på 10 minutter

Vil du vite mer om bruk av CSS? Prøv disse grunnleggende CSS-kodeeksemplene til å begynne med, og bruk dem deretter på dine egne websider.

Les Neste

Om forfatteren