Wie kann ich die Farbe des letzten Wortes in einem h1-Tag nur mithilfe von CSS ändern?

CSS zum Ändern der Farbe des Schlussworts in h1

Im Bereich der Webentwicklung ist die Gestaltung von Elementen mithilfe von CSS von größter Bedeutung. Stellen Sie sich ein Szenario vor, in dem der primäre Titel einer Website, dargestellt durch ein

Tag, erfordert einen Hauch von Vielfalt, indem das letzte Wort anders gefärbt wird. Bei Verwendung eines Tag bietet eine unkomplizierte Lösung, ein eleganterer Ansatz, der die Notwendigkeit von zusätzlichem Markup überflüssig macht, ist wünschenswert.

Potenzielle Lösung

Traditionell war es unmöglich, diesen Effekt allein durch CSS zu erzielen . Fortschritte im Bereich CSS haben jedoch neue Möglichkeiten eröffnet. Ein solches Tool ist die Bibliothek „lettering.js“, die den Selektor „:last-word“ einführt.

Implementierung

Um diesen Selektor zu verwenden, integrieren Sie das Skript „lettering.js“. in den HTML-Code der Website einbinden. Anschließend können die folgenden CSS-Regeln implementiert werden:

<code class="css">h1 {
  color: #f00;
}

/* EDIT: Requires lettering.js. 
 * Please read the complete post, before downvoting. Instead vote up. Thank you :)
 */
h1::last-word {
  color: #00f;
}</code>

Durch den Einsatz dieser Technik wird das letzte Wort innerhalb des

Das Element wird mit der angegebenen Farbe geschmückt, während der verbleibende Text seinen Standardstil behält.

Das obige ist der detaillierte Inhalt vonWie kann ich die Farbe des letzten Wortes in einem h1-Tag nur mithilfe von CSS ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!