Mens vi utvikler et nettsted, kommer nettutviklere ofte over situasjoner der det er nødvendig for å style en viss del av et element eller legge til bestemt innhold før eller etter et bestemt element. Alle slike oppgaver kan utføres ved hjelp av pseudo-elementer levert i CSS. Dette innlegget vil lære deg alt om pseudo-elementer.

Du vil gå gjennom følgende emner i dette innlegget.

1. Hva er pseudo-elementer i CSS
2. ::første bokstav
3. ::første linje
4. ::før
5. ::etter
6. :: utvelgelse

Hva er pseudo-elementer i CSS

Pseudo-elementer er nøkkelord som brukes til å style en bestemt del av et spesifisert element. Disse settes inn i en velger når stylingelementer. For eksempel vil du gi litt farge til den første bokstaven i et element, eller du vil legge til litt tekst før et bestemt element.

Syntaks

velger :: pseudo-element
Eiendomsverdi;

Her har vi fremhevet noen av de viktige pseudo-elementene for din bedre forståelse.

::første bokstav

Dette brukes til å gi en viss stil til den første bokstaven i noen tekst, dessuten brukes den bare på blokknivåelementene. Den støtter mange CSS -egenskaper som farge, skrift, margin, grense, polstring, bakgrunn, etc.

Eksempel

Følg koden nedenfor for å forstå hvordan dette elementet fungerer.

Html

Pseudo-elementer

Her har vi definert en

element.

CSS

H1 :: første bokstav
Farge: Sandybrown;
Font-stil: kursiv;
Font-størrelse: 50px;

Vi gir sandybrown farge, kursiv fontstil og 50px skriftstørrelse til den første bokstaven i overskriften ved å bruke :: første bokstav pseudo-element.

Produksjon

Den første bokstaven i overskriften ble stylet ved hjelp av :: første bokstav pseudo-element.

::første linje

Som navnet antyder, brukes dette til å gi litt stil til den første linjen i en tekst, dessuten er det bare aktuelt på blokknivåelementer. Den støtter noen CSS -egenskaper som er farge, skrift, bakgrunn osv.

Eksempel

Anta at du vil gi litt farge, stil og vekt til den første linjen til en

element. Følg koden nedenfor.

Html

Som navnet antyder, brukes denne pseudo-elementet til å style den første linjen i en tekst. Dette elementet kan også bare brukes på elementer på blokknivå. Den støtter noen CSS -egenskaper som er farge, skrift, bakgrunn osv.

I koden ovenfor har vi definert en

element og la til litt tekst i den.

CSS

P :: Førstelinje
Farge: lilla;
Font-stil: kursiv;
Fontvekt: fet;

Ved å bruke den :: førstelinje pseudo-elementet gir vi litt farge, fontstil og fontvekt til den første linjen i avsnittet.

Produksjon

Første linje av avsnittet ble stylet vellykket.

::før

For å legge til innhold før en viss del av et element, brukes :: før pseudo-element. Den støtter CSS -innholdsegenskap.

Eksempel

Anta at du vil legge til anførselstegn i begynnelsen av et avsnitt. Bruk følgende kode.

Html

Dette er noe avsnitt.

Her definerer vi avsnittet vårt som vi alle legger til et anførselstegn.

CSS

P :: før
innhold: '"';
Farge: blå;
Font-størrelse: 25px;

I koden ovenfor legger vi til et anførselstegn før avsnittet og gir den fargen blå, og setter størrelsen til 25px ved å bruke :: før pseudo-element.

Produksjon

Sitatmerket ble lagt til med suksess ved bruk av :: før pseudo-element.

::etter

Dette fungerer på en lignende måte som :: før pseudo-element, med den eneste forskjellen som det setter inn innhold etter en viss del av et element. Dette elementet brukes også med CSS -innholdsegenskapen.

Eksempel

Følg eksemplet nedenfor for å forstå arbeidet med :: etter pseudo-element.

Html

Kaskaderende stilark

Her har vi spesifisert en

element og la litt innhold til det.

CSS

H1 :: etter
Innhold: '(Pseudo-elementer)';
Farge: blå;
Font-størrelse: 15px;

Vi legger til bestemt innhold etter

element, gi den spesielle innholdet blå farge, og sette sin fontstørrelse til 15px.

Produksjon

Innhold er lagt til etter overskriften.

:: utvelgelse

For å style et element som en bruker velger, brukes :: utvalg pseudo-element. Den støtter noen CSS -egenskaper som er farge, bakgrunn osv.

Eksempel

Anta at du vil at et visst element skal fremheves når en bruker velger det. Følg koden nedenfor.

Html

Noen overskrifter

Her spesifiserer vi en overskrift.

CSS

H1 :: utvelgelse
Bakgrunnsfarge: Hotpink;

I koden ovenfor bruker vi :: utvalg pseudo-element for å gi overskriften en rosa farge hver gang brukeren velger den.

Produksjon

Pseudo-elementet: utvalget fungerer som den skal.

Konklusjon

Pseudo-elementer er nøkkelord som brukes til å style en bestemt del av et spesifisert element. Det er forskjellige pseudo-elementer i CSS, men noen av de viktigste og ofte brukte pseudo-elementene er; ::første bokstav, ::første linje, ::før, ::etter, og :: utvelgelse. Hver av disse brukes til forskjellige stylingsformål som er forklart i detalj i dette innlegget sammen med hjelp av passende eksempler.