CSS pseudo-element brukes til å style et spesifikt elements del. For eksempel kan den brukes til å sette inn innhold før eller etter elementet eller stilen den første linjen eller bokstaven i elementet. For å gjøre det brukes før og etter pseudo-elementer som trer i kraft.

Denne bloggen vil instruere deg om CSS “før”Og“etter”Selectors. Men før det vil vi diskutere syntaks av pseudo-elementer.

Hvordan bruke “Pseudo-element” i CSS?

Syntaksen til pseudo-elementet er nevnt nedenfor:

Velger :: pseudo-element
CSS -egenskaper ..

Her:

• “Velger ”: HTML -elementene som vi ønsker å style i CSS, er valgt ved hjelp av CSS -velgerne. Disse velgerne kan være ID -velgere, elementvelgere, klasseselger eller mer.
• “Pseudo-element”: Pseudo-element brukes til å style et bestemt elements del. Det kan være før, etter, første linje, første bokstav eller mer.
• “CSS -egenskaper”: Disse egenskapene kan brukes til å style det ekstra innholdet.

Eksempel

Første trinn er å lage en ny div med klassen “hoved-”. Innenfor dette divelementet, inkluderer

og

Elementer for å legge til litt innhold på websiden:

Hei Verden!

Linuxhint er det beste opplæringsnettstedet.

Bli med i samfunnet vårt

Vi skriver artikler og lager videoer for å utdanne verden på nettet.

Stil før “h2” element

H2 :: før
Innhold: "->";
Farge: grønn;

“H2 :: før”Refererer til å legge stil til før av H2 -elementet med følgende egenskaper:

• “innhold”Eiendom spesifiserer innholdet som er satt inn i elementet.
• “farge”Eiendom brukes til å stille inn elementets tekstfarge.

Stil “P” -element

.hoved p
Font-størrelse: 20px;

“.hoved s”Henviser til P -elementet i hoveddiven. Fontstørrelsen er satt til 20px ved å bruke "skriftstørrelse”Eiendom.

Her er resultatet av koden ovenfor:

Som vi kan se, er hvert H1 -element i HTML -filen spesifisert med symbolet før den.

Her er listen over innhold som kan spesifiseres i innholdsegenskapen:

• “En linjepause”: For å sette inn en linjepause, bruk“\EN”Karakter
• “Ingenting”: Det er spesifisert som tomme inverterte kommaer og er nyttig når du setter inn bakgrunnsbilder.
• “Et bilde”: For å sette inn et bilde i innholdsegenskapen, spesifiserer vi“ URL ”for bildet.
• “En streng”: Spesialpersoner må kodes som en unicode -enhet.

Hvordan legge til GIF “før” element?

Vi kan også legge til GIF eller bilder før eller etter elementene. Se på eksemplet nedenfor.

Stil før “h1” element

H1 :: før
Bakgrunnsbilde: URL (/gifs/smil.gif);
Bakgrunnsstørrelse: 50px;
Bakgrunnsrepetitt: No-Repeteat;
Display: Inline-block;
Bredde: 50px;
Høyde: 50px;
innhold: "";

“H1 :: før”Refererer til innsatsstilen før H1 -elementet. Følgende egenskaper brukes på objektet som er satt inn før H1 -elementet:

• “bakgrunnsbilde”Eiendom spesifiserer nettadressen til GIF.
• “bakgrunnsstørrelse”Eiendom brukes til å spesifisere bakgrunnsstørrelsen. S
• “Bakgrunnsrepetitt”Eiendom definerer hvordan bildene gjentas.
• “vise”Eiendom med verdien”Inline-block”Tillatelser å spesifisere elementets høyde og bredde.
• “bredde”Eiendom setter HTML -elementets bredde.
• “høyde”Eiendom setter HTML -elementets høyde.
• “innhold”Eiendom brukes til å sette inn det genererte innholdet i forbindelse med pseudo-selektorene.

Stil “Main” Div

.hoved
bakgrunnsfarge: RGB (245, 245, 44);
polstring: 5px;

“.hoved-”Klasse av DIV -elementet er stylet med de listede egenskapene:

• “bakgrunnsfarge”Eiendom brukes til å spesifisere elementets bakgrunnsfarge.
• “polstring”Eiendom brukes til å sette plassen over innholdet i T eller inne i grensen.

Det kan observeres at GIF er plassert før hvert H1 -element:

Hvordan sette inn symboler “etter” spesifikke elementer?

Pseudo-selector “::etter”Brukes til å sette inn innhold etter elementet. Eksemplet nedenfor viser etter pseudo-selector.

Eksempel

Lag et nytt divelement med “hoved-”Klasse. Inne i dette elementet, legg til

og

Elementer for å legge til litt innhold på websiden:

Html

Hypertekst markeringsspråk

CSS

Kaskaderende stilark

Stil etter “H2” -element

H2 :: etter
innhold: "*";
fargen rød;
Font-størrelse: 30px;

“H2 :: etter”Refererer til etter av H2 -elementet. Nedenfor er egenskapene som brukes på det:

• “innhold”Eiendom spesifiserer innholdet som er satt inn i elementet.
• “farge”Eiendom brukes til å definere skriftfargen.
• “skriftstørrelse”Eiendom brukes til innstilling av elementets skriftstørrelse.

Stil “P” -element

.Hovedinnhold P
Font-størrelse: 20px;

Fontstørrelsen på P-elementet i hovedinnholdet DIV er spesifisert ved hjelp av “skriftstørrelse”Eiendom.

Utgangen fra ovennevnte kodebit er vist nedenfor:

Vi har lært om CSS før og etter utvalgere i CSS.

Konklusjon

I CSS brukes pseudo-elementer for å spesifisere noen stylingegenskaper til den delen av et element. For eksempel "::før”Og“::etter”Spesifiserte elementer brukes til å legge til stilen før og etter ønsket element, henholdsvis. Denne bloggen har demonstrert bruken av CSS før og etter velgerne.