Tento zápis vás prevedie zmenou obsahu v CSS.
Ako zmeniť obsah v CSS?
Na zmenu obsahu v CSS použijeme nasledujúce metódy:
Poďme si prejsť každý spôsob jeden po druhom!
Metóda 1: Použite ::after Selector s vlastnosťou obsahu na zmenu obsahu v CSS
' ::po Selektor umiestni zadaný obsah za prvok HTML pomocou CSS “ obsahu ' nehnuteľnosť. Táto operácia pomáha pri pridávaní obsahu do vybratého prvku. Okrem toho, „ displej ” vlastnosť možno použiť na skrytie existujúceho obsahu.
Pozrime sa na nižšie uvedený príklad, aby sme pochopili, ako zmeniť obsah v CSS pomocou selektora ::after.
Príklad
Tu je naša HTML stránka s textom “ Dobré ráno!!! “. Nahradíme pridaný obsah:
V súčasnosti sme pridali „ “ tag s textom v časti tela nášho súboru HTML:
< p > Dobré ráno!!! < / p >V našom súbore CSS teraz použijeme selektor ::after ako „ telo::po “ a použite „ obsahu “vlastnosť s hodnotou” Dobrý večer “ vo svojej definícii. Výsledkom je, že selektor CSS umiestni text hneď za napísaný text. Nakoniec skryte existujúci text pomocou „ displej vlastnosť a nastavte jej hodnotu na žiadny “:
< štýl >telo::po {
obsahu : 'Dobrý večer' ;
}
p {
displej: žiadny;
}
< / štýl >
Teraz uložte súbor HTML a jednoducho ho otvorte v prehliadači alebo použite „Živý server “ na rovnaký účel:
Ako vidíte, obsah bol úspešne zmenený pomocou selektora ::after CSS:
Metóda 2: Použite ::before Selector s vlastnosťou obsahu na zmenu obsahu v CSS
V CSS je „ ::predtým ” sa používa na to, aby sa obsah zobrazil priamo pred existujúcim obsahom prvku. Môže sa použiť v kombinácii s „ obsahu ” na pridanie nového obsahu do vybratého prvku.
Príklad
Špecifikujte volič ::before hneď za telom ako „ telo::predtým “. Týmto sa nový obsah umiestni pred existujúci obsah. Upozorňujeme, že všetky ostatné vlastnosti zostávajú rovnaké ako v predchádzajúcom príklade:
< štýl >telo::predtým {
obsahu : 'Dobrý večer' ;
}
p {
displej: žiadny;
}
< / štýl >
Výkon
Vysvetlili sme rôzne metódy na zmenu obsahu v CSS.
Záver
Ak chcete zmeniť obsah, „ ::po “ a „ ::predtým ” Selektor CSS sa používajú s “ obsahu ' nehnuteľnosť. V prvom prístupe sa špecifikovaný text pridá za vybraný prvok, zatiaľ čo druhý selektor CSS funguje opačne. Navyše, „ displej Vlastnosť ” možno použiť na skrytie existujúceho obsahu prvku. Takto sa úplne zmení obsah v CSS. Pokryli sme dva spôsoby zmeny obsahu v CSS.