Ez az írás elvezeti Önt a CSS-tartalom megváltoztatásához.
Hogyan változtassunk tartalmat a CSS-ben?
A CSS tartalmának megváltoztatásához az alábbi módszereket fogjuk használni:
Nézzük végig az egyes módszereket egyenként!
1. módszer: Használja a ::after Selector with content Tulajdonságot a tartalom megváltoztatásához a CSS-ben
Az ' ::után ” választó a megadott tartalmat a HTML elem után helyezi el a CSS segítségével ” tartalom ' ingatlan. Ez a művelet segít a tartalom hozzáadásához a kiválasztott elemhez. Ezenkívül a „ kijelző ” tulajdonság használható a meglévő tartalom elrejtésére.
Vessünk egy pillantást az alábbi példára, hogy megértsük, hogyan módosíthatjuk a tartalmat a CSS-ben az ::after választó segítségével.
Példa
Itt van a HTML oldalunk a következő szöveggel: Jó reggelt kívánok!!! ”. Cseréljük ki a hozzáadott tartalmat:
Jelenleg hozzáadtunk egy „ ' címke szöveggel a HTML-fájlunk törzsrészében:
< p > Jó reggelt kívánok!!! < / p >A CSS-fájlunkban most az ::after választót fogjuk használni, mint ' test::utána ', és használja a ' tartalom ' ingatlan ' értékkel' Jó estét ” definíciójában. Ennek eredményeként a CSS-választó közvetlenül az írott szöveg után helyezi el a szöveget. Végül rejtse el a meglévő szöveget a ' kijelző ” tulajdonságot, és állítsa be értékét „ egyik sem ”:
< stílus >test::utána {
tartalom : 'Jó estét' ;
}
p {
kijelző: nincs;
}
< / stílus >
Most mentse el a HTML-fájlt, és egyszerűen nyissa meg a böngészőben vagy használja „Élő szerver ” ugyanerre a célra:
Mint látható, a tartalom sikeresen megváltozott a ::after CSS választó segítségével:
2. módszer: Használja a ::before Selector with Content Property lehetőséget a CSS-ben lévő tartalom megváltoztatásához
A CSS-ben a „ ::előtt ” választót arra használják, hogy a tartalom közvetlenül az elem meglévő tartalma előtt jelenjen meg. Használható a ' tartalom ” tulajdonság új tartalom hozzáadásához a kiválasztott elemhez.
Példa
Adja meg a ::before választót közvetlenül a törzs után, mint ' test::előtte ”. Ezzel az új tartalom a meglévő tartalom elé kerül. Vegye figyelembe, hogy az összes többi tulajdonság ugyanaz marad, mint az előző példában:
< stílus >test::előtte {
tartalom : 'Jó estét' ;
}
p {
kijelző: nincs;
}
< / stílus >
Kimenet
Különféle módszereket ismertettünk a CSS-ben lévő tartalom megváltoztatására.
Következtetés
A tartalom módosításához: ' ::után ” és „ ::előtt ' A CSS-választókat a ' tartalom ' ingatlan. Az első megközelítésben a megadott szöveg a kiválasztott elem után kerül hozzáadásra, míg a második CSS-választó fordítva működik. Ráadásul a „ kijelző ” tulajdonság felhasználható egy elem meglévő tartalmának elrejtésére. Így a tartalom teljesen megváltozik a CSS-ben. A CSS-ben a tartalom megváltoztatásának két módszerét ismertettük.