コーディング:underline に不満足!下線にpaddingを設定したい!text-decoration

コーディング:テキストに下線を引くWEB

テキストに下線を付ける場合、css の text-decoration: underline を使うと文字と下線がくっついてしまって不満。

例えば、こんな感じ。

文字と下線の距離を調整するために、border-bottom を使おう!

仕上がりは、こんな感じ。

cssコードは以下の通り。
クラスを「p_underline」としてみました。

下線の太さや色、テキストから下線までの間隔も調整できます。お好みで。

.p_underline {
  border-bottom:2px solid #666666; /*下線の太さと色*/
  padding-bottom:2px;/*テキストから下線までの間隔*/
}

以上

タイトルとURLをコピーしました