Nahrazení textu ve spanu jiným textem pomocí CSS vlastnosti content

Pokud máte na stránce nějaký text, který chcete pomocí CSS nahradit jiným, stačí původní text obalit do <span>. Následně lze v CSS nastylovat span tak, aby se nezobrazil – pomocí display: block. A následně vložit jiný text za ten původní (nyní již vymazaný) pomocí CSS vlastnosti content. Text také můžeme obalit divem, ale nemusíme. Takže HTML kód bude:

<div class="text"><span>Původní starý text</span></div>

CSS:

.text:after {
    content: "Nějaký nový text"; /* Zde zadáme nový text */
}

.text span {
    display: none; /* Zde zneveřejníme text ve spanu */
}

Vlastně jsme starý text obalený ve spanu zneviditelnili a naopak pomocí vlastnosti content zveřejnili jiný obsah.

Živá ukázka

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *