CSSを使用したテキストのホバー時のアンダーライン効果

1. リンクのホバー時にアンダーラインを表示する方法:

a:hover {
  text-decoration: underline;
}

上記のCSSコードを使用すると、a タグ内のテキストがホバーされた時にアンダーラインが表示されます。

2. 任意の要素のホバー時にアンダーラインを表示する方法:

.hover-underline:hover {
  text-decoration: underline;
}

上記のCSSコードでは、.hover-underline クラスが付いた要素がホバーされた時にアンダーラインが表示されます。この方法を使用すると、リンク以外の要素にもアンダーライン効果を適用することができます。

3. アンダーラインのスタイルや色をカスタマイズする方法:

a:hover {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-decoration-color: red;
}

上記のCSSコードでは、ホバー時のアンダーラインのスタイルを点線（dashed）に設定し、色を赤（red）に設定しています。必要に応じて、text-decoration-style や text-decoration-color プロパティを調整してカスタマイズすることができます。

以上が、テキストのホバー時にアンダーライン効果を実現するためのシンプルで簡単な方法といくつかのコード例です。これらの方法を活用して、ウェブサイトやブログのデザインにアンダーライン効果を追加してみてください。