Inhalt in CSS ändern

1. Verwenden Sie das Pseudo-Element :after und die Eigenschaft display, um Text in CSS zu ersetzen
2. Verwenden Sie das Pseudo-Element :before und die Eigenschaft visibility, um Text in CSS zu ersetzen

Das Tutorial stellt einige Möglichkeiten vor, den Inhalt in CSS zu ändern oder zu ersetzen.

Verwenden Sie das Pseudo-Element :after und die Eigenschaft display, um Text in CSS zu ersetzen

Wir können die Pseudo-Elemente in CSS verwenden, um die in HTML geschriebenen Inhalte zu ändern oder zu ersetzen. Verwenden Sie dann das Pseudo-Element :after und die Eigenschaft content, um unser Ziel zu erreichen.

Verwenden Sie den Selektor :after, um einige Inhalte nach dem ausgewählten Inhalt anzuhängen. Um den Inhalt hinzuzufügen, verwenden wir die Eigenschaft content.

Wir können den gewünschten Inhalt als Wert der Eigenschaft content schreiben. Um den Inhalt zu ersetzen oder zu ändern, können wir den zuvor geschriebenen Inhalt ausblenden und die Eigenschaft content verwenden, indem wir das Element mit dem Selektor :after auswählen.

Diese Methode setzt die Eigenschaft display auf none, um den vorherigen Text auszublenden.

Erstellen Sie beispielsweise ein div mit der Klasse text. Schreiben Sie in das div ein span-Tag und the original text in das span.

Wählen Sie in CSS den Span aus und setzen Sie dessen Eigenschaft display auf none. Als nächstes verwenden Sie den :after-Selektor, um die text-Klasse auszuwählen.

Schreiben Sie zum Schluss die Eigenschaft content und setzen Sie deren Wert im Body auf the changed text.

Wenn das Code-Snippet im Beispiel unten ausgeführt wird, wird the changed text angezeigt. Hier wird der Text the original text aus dem Dokument entfernt und es tut so, als ob das Element nicht existiert.

Dies liegt daran, dass der Wert der Eigenschaft Inhalt seinen Platz einnehmen wird. Als Ergebnis werden die neuen Inhalte angezeigt.

<div class="text">
<span>the original text</span>
</div>

.text span {
 display: none;
}
.text:after {
 content: 'the changed text';
}

Verwenden Sie das Pseudo-Element :before und die Eigenschaft visibility, um Text in CSS zu ersetzen

Wir können den in HTML geschriebenen Inhalt ändern, indem wir das Pseudo-Element :before in CSS verwenden. Das Pseudo-Element :before funktioniert ähnlich wie das Pseudo-Element :after, aber der Inhalt wird hier dargestellt.

Verwenden Sie es, um den Inhalt vor das ausgewählte Element zu schreiben. Diese Methode verwendet die Eigenschaft content wie bei der ersten Methode.

Zudem können wir mit der Eigenschaft visibility den bisherigen Inhalt ausblenden und auf hidden setzen.

Bei der Einstellung hidden macht die Eigenschaft visibility den Inhalt unsichtbar, aber das Leerzeichen wird im Dokument angezeigt. Wenn Sie jedoch den Selektor :before verwenden, wird das Leerzeichen mit dem neuen Inhalt überschrieben.

Wählen Sie beispielsweise das Element span aus und setzen Sie seine Eigenschaft visibility auf hidden im Beispiel der ersten Methode.

Denken Sie jedoch daran, die zuvor angewendeten Stile zu entfernen. Wählen Sie als nächstes die Klasse text mit dem Selektor :before aus und schreiben Sie den neuen Inhalt wie im Beispiel unten.

Verwenden Sie display:none, um den vorherigen Inhalt auszublenden. Wir können jedoch nicht visibility:hidden verwenden, während wir den Selektor :after verwenden, da der Platz des versteckten Elements erhalten bleibt.

<div class="text">
<span>before</span>
</div>

.text span {
 visibility:hidden;
}
.text:before {
 content: 'after';
}