Dieser Artikel führt Sie zum Ändern von Inhalten in CSS.
Wie ändere ich Inhalte in CSS?
Um den Inhalt in CSS zu ändern, verwenden wir die folgenden Methoden:
Lassen Sie uns jede Methode einzeln durchgehen!
Methode 1: Verwenden Sie ::after Selector mit content-Eigenschaft, um den Inhalt in CSS zu ändern
Das ' ::nach ” Selektor platziert den angegebenen Inhalt mithilfe des CSS hinter dem HTML-Element “ Inhalt ' Eigentum. Diese Operation hilft beim Hinzufügen des Inhalts zum ausgewählten Element. Außerdem ist die „ Anzeige ”-Eigenschaft kann verwendet werden, um den vorhandenen Inhalt auszublenden.
Schauen wir uns das folgende Beispiel an, um zu verstehen, wie man den Inhalt in CSS mit dem ::after-Selektor ändert.
Beispiel
Hier ist unsere HTML-Seite mit dem Text „ Guten Morgen!!! “. Lassen Sie uns den hinzugefügten Inhalt ersetzen:
Aktuell haben wir ein „ “-Tag mit Text im Hauptteil unserer HTML-Datei:
< p > Guten Morgen!!! < / p >In unserer CSS-Datei verwenden wir jetzt den ::after-Selektor als „ body::nachher “ und verwenden Sie die „ Inhalt „Eigenschaft mit dem Wert“ Guten Abend “ innerhalb seiner Definition. Als Ergebnis platziert der CSS-Selektor den Text direkt hinter dem geschriebenen Text. Zuletzt blenden Sie den vorhandenen Text mit dem „ Anzeige ” Eigenschaft und setzen Sie ihren Wert auf “ keiner “:
< Stil >body::nachher {
Inhalt : 'Guten Abend' ;
}
p {
Anzeige: keine;
}
< / Stil >
Speichern Sie jetzt Ihre HTML-Datei und öffnen Sie sie einfach im Browser oder verwenden Sie sie „Live-Server “ zum gleichen Zweck:
Wie Sie sehen können, wurde der Inhalt erfolgreich mit dem ::after CSS-Selektor geändert:
Methode 2: Verwenden Sie ::before Selector mit content-Eigenschaft, um den Inhalt in CSS zu ändern
Im CSS ist das „ ::Vor Der Selektor wird verwendet, um den Inhalt direkt vor dem vorhandenen Inhalt eines Elements erscheinen zu lassen. Es kann in Kombination mit dem „ Inhalt ”-Eigenschaft, um dem ausgewählten Element neuen Inhalt hinzuzufügen.
Beispiel
Geben Sie den ::before-Selektor direkt nach dem Text als „ body::vorher “. Dadurch wird der neue Inhalt vor dem vorhandenen Inhalt platziert. Beachten Sie, dass alle anderen Eigenschaften dieselben bleiben wie im vorherigen Beispiel:
< Stil >body::vorher {
Inhalt : 'Guten Abend' ;
}
p {
Anzeige: keine;
}
< / Stil >
Ausgabe
Wir haben verschiedene Methoden erklärt, um den Inhalt in CSS zu ändern.
Fazit
Um den Inhalt zu ändern, „ ::nach ' und ' ::Vor ” CSS-Selektoren werden mit dem “ Inhalt ' Eigentum. Beim ersten Ansatz wird der angegebene Text nach dem ausgewählten Element hinzugefügt, während der zweite CSS-Selektor das Gegenteil bewirkt. Außerdem ist die „ Anzeige ”-Eigenschaft kann verwendet werden, um den vorhandenen Inhalt eines Elements zu verbergen. So wird der Inhalt komplett in CSS verändert. Wir haben die beiden Methoden zum Ändern des Inhalts in CSS behandelt.