Denne artikel vil guide dig om at ændre indhold i CSS.
Hvordan ændrer man indhold i CSS?
For at ændre indholdet i CSS, vil vi bruge nedenstående metoder:
Lad os gennemgå hver metode en efter en!
Metode 1: Brug ::after Selector med indholdsegenskab til at ændre indhold i CSS
Det ' ::efter ' selector placerer det angivne indhold efter HTML-elementet ved hjælp af CSS ' indhold ” ejendom. Denne handling hjælper med at tilføje indholdet til det valgte element. Derudover er ' Skærm ” egenskab kan bruges til at skjule det eksisterende indhold.
Lad os se på nedenstående eksempel for at forstå, hvordan man ændrer indholdet i CSS ved hjælp af ::after-vælgeren.
Eksempel
Her er vores HTML-side med teksten ' God morgen!!! ”. Lad os erstatte det tilføjede indhold:
I øjeblikket har vi tilføjet en ' ' tag med tekst i brødtekstdelen af vores HTML-fil:
< s > God morgen!!! < / s >I vores CSS-fil vil vi nu bruge ::after-vælgeren som ' krop::efter ' og brug ' indhold ' ejendom med værdien ' God aften ” inde i dens definition. Som et resultat vil CSS-vælgeren placere teksten lige efter den skrevne tekst. Til sidst skal du skjule den eksisterende tekst ved at bruge ' Skærm ' egenskab og sæt dens værdi til ' ingen ”:
< stil >krop::efter {
indhold : 'God aften' ;
}
s {
display: ingen;
}
< / stil >
Gem nu din HTML-fil og åbn den i browseren eller brug den 'Live server ” til samme formål:
Som du kan se, er indholdet blevet ændret med succes ved hjælp af ::after CSS-vælgeren:
Metode 2: Brug ::before Selector med indholdsegenskab til at ændre indholdet i CSS
I CSS er ' ::Før ”-vælgeren bruges til at få indholdet til at vises lige før det eksisterende indhold af et element. Den kan bruges i kombination med ' indhold ” egenskab for at tilføje nyt indhold til det valgte element.
Eksempel
Angiv ::before-vælgeren lige efter brødteksten som ' krop::før ”. Dette vil placere det nye indhold før det eksisterende indhold. Bemærk, at alle de andre egenskaber forbliver de samme som i det foregående eksempel:
< stil >krop::før {
indhold : 'God aften' ;
}
s {
display: ingen;
}
< / stil >
Produktion
Vi har forklaret forskellige metoder til at ændre indholdet i CSS.
Konklusion
For at ændre indholdet, ' ::efter ' og ' ::Før ' CSS-vælgere bruges sammen med ' indhold ” ejendom. I den første tilgang tilføjes den angivne tekst efter det valgte element, hvorimod den anden CSS-vælger virker modsat. Desuden er ' Skærm ” egenskab kan bruges til at skjule det eksisterende indhold af et element. Sådan ændres indholdet fuldstændigt i CSS. Vi har dækket de to metoder til at ændre indholdet i CSS.