リンクへのマウスホバー時の表現方法

この記事内容は表示サンプルですので特に意味はありません。リンクテキストには破線での下線を付けています。またマウスホバーした際には実線となります。この表現はCSSの text-decoration ではできませんので
次のようにしています。

A タグにボーダー線を下側だけ設定しています。その際に「dotted」を指定しておくことで下線での破線を表現しています。

     a {
        text-decoration: none;
        border-bottom: dotted 1px;
      }

ホバー時は実線になるよう「solid」を指定しています。

      a:HOVER {
        text-decoration: none;
        border-bottom: solid 1px;
      }

この記事はテンプレートの表示サンプルとして記載しています。内容に特に意味はありませんのでご注意ください。