Comment puis-je changer la couleur du dernier mot dans une balise h1 en utilisant uniquement CSS ?

CSS pour modifier la couleur du mot final dans h1

Dans le domaine du développement Web, le style des éléments à l'aide de CSS est primordial. Prenons un scénario dans lequel le titre principal d'un site Web, représenté par un symbole

tag, nécessite une touche de diversité en colorant différemment son dernier mot. Lors de l'utilisation d'un paramètre La balise fournit une solution simple, une approche plus élégante qui élimine le besoin de balisage supplémentaire est souhaitée.

Solution potentielle

Traditionnellement, obtenir cet effet uniquement via CSS était impossible . Cependant, les progrès dans le domaine du CSS ont ouvert de nouvelles possibilités. L'un de ces outils est la bibliothèque lettering.js, qui introduit le sélecteur ::last-word.

Implémentation

Pour utiliser ce sélecteur, incorporez le script lettering.js dans le code HTML du site Web. Par la suite, les règles CSS suivantes peuvent être implémentées :

<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>

En employant cette technique, le dernier mot dans le

L'élément sera orné de la couleur spécifiée, tandis que le texte restant conservera ses styles par défaut.

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!