　今回はCSSでリンクの下線を消す方法を解説していきたいと思います。
下記は何もスタイルを指定していない状態のリンクになります。ブラウザによって多少は異なりますが、青色で下線の付いたテキストになります。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <a href="#">下線ありリンク</a>
　</body>
</html>

文字に下線を付けるスタイルはtext-decoration: underline;です。
リンクにはこのスタイルが自動で適用されていると考えてください。

全てのページのリンクの下線を消す方法

　全てのページリンクの下線を消すには、すべてのaタグに対してtext-decoration:none; のCSSを指定しましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <a href="#">下線なしリンク</a>
　</body>
</html>

style.css

a {
    text-decoration:none; 
}

マウスオーバーしたときのみ下線を表示する

　リンクの下線を消していると、リンクかどうかわからなくなってしまいます。
そのため、マウスオーバーしたときのみ下線を表示したい場合があります。カーソルが当たっている状態は:hover疑似クラスで指定できます。

index.html

<a href="#">下線なしリンク(ホバーで下線表示あり)</a>

style.css

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

「全てのリンクではなく、特定のリンクのみ設定を変えたい」という場合は、専用のclassやidを作成して設定しましょう。