Denne artikkelen vil veilede deg om hvordan du endrer innhold i CSS.
Hvordan endre innhold i CSS?
For å endre innholdet i CSS, bruker vi metodene nedenfor:
La oss gå gjennom hver metode en etter en!
Metode 1: Bruk ::after Selector med innholdsegenskap for å endre innhold i CSS
« ::etter '-velgeren plasserer det angitte innholdet etter HTML-elementet ved å bruke CSS ' innhold ' eiendom. Denne operasjonen hjelper til med å legge til innholdet i det valgte elementet. I tillegg er ' vise egenskapen kan brukes til å skjule det eksisterende innholdet.
La oss ta en titt på eksemplet nedenfor for å forstå hvordan du endrer innholdet i CSS ved å bruke ::after-velgeren.
Eksempel
Her er vår HTML-side med teksten ' God morgen!!! '. La oss erstatte det ekstra innholdet:
For øyeblikket har vi lagt til en ' ' tag med tekst i hoveddelen av HTML-filen vår:
< s > God morgen!!! < / s >I CSS-filen vår vil vi nå bruke ::after-velgeren som ' kroppen::etter ' og bruk ' innhold ' eiendom med verdien ' God kveld ” inne i definisjonen. Som et resultat vil CSS-velgeren plassere teksten rett etter den skrevne teksten. Til slutt, skjul den eksisterende teksten ved å bruke ' vise ' egenskap og sett verdien til ' ingen ':
< stil >kroppen::etter {
innhold : 'God kveld' ;
}
s {
display: ingen;
}
< / stil >
Lagre HTML-filen din og åpne den enkelt i nettleseren eller bruk den 'Live server ' for samme formål:
Som du kan se, har innholdet blitt endret ved hjelp av ::after CSS-velgeren:
Metode 2: Bruk ::before Selector med innholdsegenskap for å endre innholdet i CSS
I CSS er ' ::før ”-velgeren brukes til å få innholdet til å vises rett før det eksisterende innholdet i et element. Den kan brukes i kombinasjon med ' innhold ” egenskap for å legge til nytt innhold til det valgte elementet.
Eksempel
Angi ::before-velgeren rett etter brødteksten som ' kropp::før '. Dette vil plassere det nye innholdet før det eksisterende innholdet. Merk at alle de andre egenskapene forblir de samme som i forrige eksempel:
< stil >kropp::før {
innhold : 'God kveld' ;
}
s {
display: ingen;
}
< / stil >
Produksjon
Vi har forklart ulike metoder for å endre innholdet i CSS.
Konklusjon
For å endre innholdet, ' ::etter ' og ' ::før ' CSS-velgere brukes med ' innhold ' eiendom. I den første tilnærmingen legges den angitte teksten til etter det valgte elementet, mens den andre CSS-velgeren fungerer motsatt. Dessuten, ' vise ” egenskap kan brukes til å skjule det eksisterende innholdet i et element. Slik endres innholdet fullstendig i CSS. Vi har dekket de to metodene for å endre innholdet i CSS.