リンクアンカーのa要素について、text-decorationを修正してアンダーラインを消し、文字色を変更します。あまり変更しすぎてユーザーがリンクかどうか分からなくならないように注意してください。
リンクのアンダーラインを消し、文字色を赤に変える
text-decoration: none;でアンダーライン(underline)を非表示にします。以下サンプルは文字を赤く設定しています。
style属性で記述
<a href="https://www.yahoo.co.jp" style="text-decoration: none; color:#ff0000">Yahoo! Japan</a>
スタイルシートで記述
<a href="https://www.yahoo.co.jp" class="a-under-none">Yahoo! Japan</a>
.a-under-none{
text-decoration: none;
color:#ff0000
}
関連デザイン
a リンクを角丸ボタンにする コピペで使えるHTML+CSS
リンクアンカーのa要素を修正して、角の丸い角丸ボタンを実現します。border-radiusプロパティとtext-decorationプロパティを使用します。
programming-cafe.com
対象要素の概要
a要素
a リンクアンカー コピペで使えるHTML+CSS
リンクアンカーのa要素。#を使ったページ内リンクや、targetやrelといった属性と使用する値についても解説します。noopenerとブログランキングの注意点についても解説。
programming-cafe.com
使用するCSSの概要
text-decoration
text-decoration 文字に線を引く コピペで使えるHTML+CSS
文字にアンダーライン、打消し線、点線を引くtext-decorationプロパティ。実際に用意されている位置、スタイルについての値、全てを例示解説します。
programming-cafe.com
アンダーラインって、アンダースコアとも言うし、アンダーバーとも言うし、アンダラインだったり、ローラインンだったり、呼び方が色々あるんですよ。