frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

【css】リンクの文字色とアンダーラインの色を変える方法

スポンサードリンク


スポンサードリンク


通常リンクテキストに
text-decoration:underline;
を当てるとそのまま文字色と同じ色のアンダーラインが付きますよね。

See the Pen vmGLGo by funclur (@funclur) on CodePen.


リンクの文字色とアンダーラインの色を変えるには?

a要素の中にspanなどを入れてcolorを変えれば、リンクの文字色とアンダーラインの色を変えることができます。
つまりunderlineはa要素の文字色に依存するので、spanで文字色を設定すればよいのですね!
a要素にborder-bottomにするよりこちらの方が使い勝手的にもよさそうです!

See the Pen XRdXJE by funclur (@funclur) on CodePen.