aタグにマウスあわせると下線出るようにするやつ。

まずは、aタグの処理書いてみる。

hoge

見てみる。

デフォルトで下線ついてる。


　　　　　　　↓


 　　　　　消すか。



CSSで処理します。

a{
   text-decoration: none;
}

見てみる。

消えた。

後は、マウスあわせた時下線だせばよい。


CSSで処理します。

a:hover{
   text-decoration: underline;
}

マウスあわせてみる。

でた。


ポイント

• デフォルトで下線ついてるから消す。
• 擬似要素で下線つける。

こんな感じ。