CSSを使用してリンク内の一部のテキストを異なる色で表示する方法

方法1: ::after疑似要素を使用する方法 この方法では、::after疑似要素を使用して、リンク内の一部のテキストに別の色を適用します。

a::after {
  content: attr(data-colored-text);
  color: red; /* 好きな色を指定 */
}

HTMLのリンク要素で、data-colored-text属性に着色したいテキストを指定します。

<a href="#" data-colored-text="着色したいテキスト">リンク</a>

方法2: span要素を使用する方法 この方法では、span要素を使用して、リンク内の一部のテキストに異なるスタイルを適用します。

a span {
  color: blue; /* 好きな色を指定 */
}

HTMLのリンク要素内で、span要素を使用して着色したいテキストを囲みます。

<a href="#">リンク<span>着色したいテキスト</span></a>

方法3: classを使用する方法 この方法では、リンク内の特定のテキストにclass属性を追加し、それに対して異なるスタイルを適用します。

a .colored-text {
  color: green; /* 好きな色を指定 */
}

HTMLのリンク要素内の特定のテキストにclass属性を追加します。

<a href="#">リンク<span class="colored-text">着色したいテキスト</span></a>

これらはCSSを使用してリンク内の一部のテキストを異なる色で表示するためのシンプルで簡単な方法です。必要に応じて、好みの色やスタイルを適用してください。