CSS のみを使用して h1 タグの最後の単語の色を変更するにはどうすればよいですか?

h1 の最後の単語の色を変更するための CSS

Web 開発の領域では、CSS を使用して要素をスタイル設定することが最も重要です。

で表される Web サイトの主要タイトルが 1 つであるシナリオを考えてみましょう。タグには、最後の単語を異なる色で着色することで多様性を持たせる必要があります。 を使用しているときタグは簡単な解決策を提供しますが、追加のマークアップの必要性を排除する、より洗練されたアプローチが望まれています。

潜在的な解決策

従来、CSS だけでこの効果を実現することは不可能でした。 。ただし、CSS の分野の進歩により、新たな可能性が開かれました。そのようなツールの 1 つは、lettering.js ライブラリで、::last-word セレクターを導入しています。

実装

このセレクターを利用するには、lettering.js スクリプトを組み込みます。 Web サイトの HTML に埋め込みます。その後、次の CSS ルールを実装できます。

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

この手法を採用すると、

内の最後の単語が

になります。要素は指定された色で装飾されますが、残りのテキストはデフォルトのスタイルを保持します。

以上がCSS のみを使用して h1 タグの最後の単語の色を変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。