Tento zápis vás provede změnou obsahu v CSS.
Jak změnit obsah v CSS?
Ke změně obsahu v CSS použijeme níže uvedené metody:
Pojďme si projít každou metodu jednu po druhé!
Metoda 1: Ke změně obsahu v CSS použijte selektor ::after s vlastností obsahu
' ::po Selektor umístí zadaný obsah za prvek HTML pomocí CSS “ obsah ' vlastnictví. Tato operace pomáhá při přidávání obsahu do vybraného prvku. Navíc, „ Zobrazit Vlastnost ” lze použít ke skrytí stávajícího obsahu.
Podívejme se na níže uvedený příklad, abychom pochopili, jak změnit obsah v CSS pomocí selektoru ::after.
Příklad
Zde je naše HTML stránka s textem „ Dobré ráno!!! “. Nahradíme přidaný obsah:
V současné době jsme přidali „ “ tag s textem v části těla našeho souboru HTML:
< p > Dobré ráno!!! < / p >V našem souboru CSS nyní použijeme selektor ::after jako „ tělo::po “ a použijte „ obsah 'vlastnost s hodnotou' Dobrý večer “ uvnitř jeho definice. V důsledku toho selektor CSS umístí text hned za napsaný text. Nakonec skryjte stávající text pomocí „ Zobrazit vlastnost “ a nastavte její hodnotu na “ žádný “:
< styl >tělo::po {
obsah : 'Dobrý večer' ;
}
p {
displej: žádný;
}
< / styl >
Nyní uložte soubor HTML a jednoduše jej otevřete v prohlížeči nebo použijte „Živý server “ za stejným účelem:
Jak můžete vidět, obsah byl úspěšně změněn pomocí selektoru ::after CSS:
Metoda 2: Ke změně obsahu v CSS použijte selektor ::before s vlastností obsahu
V CSS je „ ::před ” se používá k tomu, aby se obsah objevil přímo před existujícím obsahem prvku. Lze jej použít v kombinaci s „ obsah ” pro přidání nového obsahu do vybraného prvku.
Příklad
Určete volič ::before hned za tělem jako „ tělo::předtím “. Tím se nový obsah umístí před stávající obsah. Všimněte si, že všechny ostatní vlastnosti zůstávají stejné jako v předchozím příkladu:
< styl >tělo::předtím {
obsah : 'Dobrý večer' ;
}
p {
displej: žádný;
}
< / styl >
Výstup
Vysvětlili jsme různé metody, jak změnit obsah v CSS.
Závěr
Chcete-li změnit obsah, „ ::po ' a ' ::před Selektory CSS se používají s „ obsah ' vlastnictví. V prvním přístupu je za vybraný prvek přidán zadaný text, zatímco druhý selektor CSS funguje opačně. Navíc, „ Zobrazit Vlastnost ” lze použít ke skrytí stávajícího obsahu prvku. Takto se v CSS kompletně změní obsah. Pokryli jsme dva způsoby změny obsahu v CSS.