Zenn
✨

文字の下に線を引こう

2025/01/01に公開
CSS
tech

文字の下に線を引きます。好きな位置にね。
まず下線という文字を表示させます

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>下線</title>
</head>
<body>
        <p class="underline">下線</p>
</body>
</html>

下線が引けましたね。

ってことでcssで下線を引いていきます

/* .underline クラスに適用される基本スタイル */
.underline {
    display: inline; /* 要素をインライン要素として扱う。下線の対象となるテキストが横並びになる。 */
    position: relative; /* 疑似要素(::after)をこの要素を基準に絶対位置で配置できるようにする。 */
}

/* .underline クラスの疑似要素 ::after に適用されるスタイル */
.underline::after {
    content: ''; /* 疑似要素に空のコンテンツを挿入。これが下線の見た目を形成する。 */
    position: absolute; /* 親要素(.underline)を基準に配置を絶対位置で設定する。 */
    height: 1px; /* 下線の高さを1ピクセルに設定。 */
    width: 100%; /* 下線を親要素の幅いっぱいに設定。 */
    left: 0; /* 下線の左端を親要素の左端に揃える。 */
    bottom: 0; /* 下線の下端を親要素の下端に揃える。 */
    background: #333; /* 下線の色をダークグレー(#333)に設定。 */
}

河川が引けましたね

次に文字と下線に間を空けて引きます

.underline {
    display: inline; /* 要素をインライン要素として扱う。下線の対象となるテキストが横並びになる。 */
    position: relative; /* 疑似要素(::after)をこの要素を基準に絶対位置で配置できるようにする。 */
    padding-bottom: 5px; /* 下線とテキストの間にスペースを追加する。 */
}

/* .underline クラスの疑似要素 ::after に適用されるスタイル */
.underline::after {
    content: ''; /* 疑似要素に空のコンテンツを挿入。これが下線の見た目を形成する。 */
    position: absolute; /* 親要素(.underline)を基準に配置を絶対位置で設定する。 */
    height: 1px; /* 下線の高さを1ピクセルに設定。 */
    width: 100%; /* 下線を親要素の幅いっぱいに設定。 */
    left: 0; /* 下線の左端を親要素の左端に揃える。 */
    bottom: 0; /* 下線の下端を親要素の下端に揃える。 */
    background: #333; /* 下線の色をダークグレー(#333)に設定。 */
}

隙間を開けて線が引けましたね

カーソルを乗せた時に下線が下に消えるようにしよう

カーソルを乗せると0.2秒で3px下にいき消えるようにするコードです

  .underline {
    display: inline;
    position: relative;
    padding-bottom: 5px;
  }

  .underline::after {
    content: '';
    position: absolute;
    height: 1px;
    width: 100%;
    left: 0;
    bottom: 0;
    background: #333;
    transition: all 200ms ease; //200msのトランジション
  }

  .underline:hover::after {
    opacity: 0; //透明化して消す
    transform: translateY(3px); //下方向に3pxいかせる
  }

Discussion