ホバーしたら下線が左右に伸びるアニメーション

こんなことを説明しています！

  1. 擬似要素を使って文字の下にだけ下線を引く方法
  2. 真ん中から下線を両サイドへ広げる方法
  3. スニペットの紹介

解説動画

コードの解説

HTMLの記述

<h2 class="title"><span>テキスト</span></h2>

ポイント

テキストの下のみに下線を引きたい

▶︎ h2はブロック要素なので、擬似要素で100%の下線を引くと幅全体に下線が引かれてしまう

▶︎ titleをインライン要素の<span>タグで囲ってそれに擬似要素を当てるように作る

CSSの記述

.title span {
    position: relative;
    &::before {
        content: '';
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 1px;
        background: #000;
        transition: all  0.3s ease;
    }
    &:hover::before {
        width: 100%;
    }
}

手順① 線の幅 ( width ) の指定

▶︎ ホバーする前の擬似要素の幅をゼロにする

▶︎ ホバーしたら幅が100%になるように

手順② 幅を広げる位置

▶︎ 中央揃え [ left: 50%,  transform: translateY(-50%); ] として

▶︎ ホバーしたらそこから両サイドに伸びるように指定

手順③ Hover アクション時までの動きをつける

▶︎ [ transition ] を使用

解説で使用したスニペット

scss.json

"before-line": {
    "prefix": "before-line",
    "body": [
        "&::before {",
        "    content: '';",
        "    position: absolute;",
        "    width: 100%;",
        "    height: 1px;",
        "    background: $1;",
        "    //配置",
        "    $2",
        "}",
    ],
    "description": "擬似要素で下線を引く"
},

"top50": {
    "prefix": "top-50%",
    "body": [
        "top: 50%;",
        "transform: translateY(-50%);",
    ],
    "description": "縦中央揃え"
},

"left50": {
    "prefix": "left-50%",
    "body": [
        "left: 50%;",
        "transform: translateX(-50%);",
    ],
    "description": "横中央揃え"
},

"hover": {
    "prefix": "hover",
    "body": [
        "&:hover {",
        "    $1",
        "}",
    ],
    "description": "hoverアクションの際に使用できる"
},
ブログに戻る

コメントを残す