Kako spremeniti vsebino v CSS

Kako Spremeniti Vsebino V Css



Pri spletnih aplikacijah si vsak razvijalec prizadeva izboljšati videz in celotno uporabniško izkušnjo z vseh vidikov. Včasih želijo razvijalci narediti stvari drugače in bolje kot drugi. Na primer, prikazati besedilo na nečem in ga nato spremeniti v nekaj drugega glede na posodobitve. Vse to je mogoče narediti s pomočjo različnih lastnosti in izbirnikov CSS.

Ta zapis vas bo vodil pri spreminjanju vsebine v CSS.

Kako spremeniti vsebino v CSS?

Če želite spremeniti vsebino v CSS, bomo uporabili spodnje metode:







Pojdimo skozi vsako metodo eno za drugo!



1. način: uporabite ::after Selector z lastnostjo vsebine za spreminjanje vsebine v CSS

' ::po ” izbirnik postavi navedeno vsebino za element HTML z uporabo CSS “ vsebino ” lastnina. Ta operacija pomaga pri dodajanju vsebine izbranemu elementu. Poleg tega je ' zaslon ” se lahko uporabi za skrivanje obstoječe vsebine.



Oglejmo si spodnji primer, da razumemo, kako spremeniti vsebino v CSS z uporabo izbirnika ::after.





Primer

Tukaj je naša stran HTML z besedilom » Dobro jutro!!! ”. Zamenjajmo dodano vsebino:



Trenutno smo dodali »

“ z besedilom v razdelku telesa naše datoteke HTML:

< str > Dobro jutro!!! < / str >

V naši datoteki CSS bomo zdaj uporabili izbirnik ::after kot ' telo :: po « in uporabite » vsebino lastnost z vrednostjo Dober večer « znotraj svoje definicije. Posledično bo izbirnik CSS postavil besedilo takoj za napisanim besedilom. Nazadnje skrijte obstoječe besedilo z uporabo ' zaslon ' in nastavite njeno vrednost na ' nič ”:

< stil >

telo :: po {

vsebino : 'Dober večer' ;

}

str {

zaslon: brez;

}

< / stil >

Zdaj shranite datoteko HTML in jo preprosto odprite v brskalniku ali uporabite »Strežnik v živo ” za isti namen:

Kot lahko vidite, je bila vsebina uspešno spremenjena z izbirnikom ::after CSS:

2. način: uporabite ::before Selector z lastnostjo vsebine za spreminjanje vsebine v CSS

V CSS je » ::prej ” Izbirnik se uporablja za prikaz vsebine tik pred obstoječo vsebino elementa. Lahko se uporablja v kombinaciji z ' vsebino ” za dodajanje nove vsebine izbranemu elementu.

Primer

Podajte izbirnik ::before takoj za telesom kot “ telo::prej ”. S tem bo nova vsebina postavljena pred obstoječo vsebino. Upoštevajte, da vse ostale lastnosti ostajajo enake kot v prejšnjem primeru:

< stil >

telo::prej {

vsebino : 'Dober večer' ;

}

str {

zaslon: brez;

}

< / stil >

Izhod

Razložili smo različne metode za spreminjanje vsebine v CSS.

Zaključek

Če želite spremeniti vsebino, ' ::po « in » ::prej Izbirniki CSS se uporabljajo z vsebino ” lastnina. Pri prvem pristopu se navedeno besedilo doda za izbranim elementom, medtem ko drugi izbirnik CSS deluje nasprotno. Poleg tega je ' zaslon ” se lahko uporabi za skrivanje obstoječe vsebine elementa. Tako se vsebina v CSS popolnoma spremeni. Pokrili smo dva načina spreminjanja vsebine v CSS.