Comment changer la couleur du dernier mot dans un en-tête h1 ?

Modifier le CSS pour modifier la couleur du terme final dans un en-tête h1

Améliorer l'esthétique du titre de votre site Web est une tâche courante dans développement web. Cette enquête se concentre sur la modification de la couleur du dernier mot dans un en-tête h1.

Pour y parvenir, une première approche consiste à utiliser l'élément span :

<h1>main <span>title</span></h1>

En appliquant des règles CSS distinctes, le titre principal et le dernier mot peuvent avoir des couleurs différentes. Cependant, cette méthode présente l'inconvénient d'introduire un balisage HTML supplémentaire.

Une solution alternative qui élimine le besoin de balisage supplémentaire utilise la bibliothèque lettering.js. Cette bibliothèque permet d'utiliser le sélecteur ::last-word, qui permet de cibler spécifiquement le dernier mot de l'en-tête h1 :

h1 {
  color: #f00;
}

/* Requires lettering.js. Please refer to the article linked below before downvoting. */
h1::last-word {
  color: #00f;
}

En incorporant la bibliothèque lettering.js et en utilisant le ::last- sélecteur de mots, il devient possible de modifier la couleur du dernier mot dans un en-tête h1 sans ajouter d'éléments de balisage supplémentaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!