CSS でアニメーションの下線効果を備えたリンクを作成する

ステップ 2: CSS を使用してメニューのスタイルを設定する

次に、CSS 部分に移り、効果を実現しましょう。

1. メニュー構造のスタイルを設定する

.menu ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
}
.menu ul li a {
  display: block;
  padding: 1rem;
  text-decoration: none;
}
.menu ul li a span {
  position: relative;
  padding-bottom: .7rem;
}

説明 :

• .menu ul : デフォルトでマージンとパディングを削除し、リストから箇条書きを削除します (list-style: none) で要素を水平方向に整列させます。 display: flex。
• .menu ul li a : リンクは、使用可能なすべてのスペースを占有します。 display: block アクセスしやすいようにパッドが入っています。
• .menu ul li a span : を追加します padding-bottom 下線効果のためのスペースを確保し、疑似要素を配置するためにテキストに追加します。 :after と position: relative。

2. 下線効果を作成する

.menu ul li a span:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateX(-50%) scaleX(0);
    width: 100%;
    height: 2px;
    background-color: #000;
    transition: transform 250ms;
}
.menu ul li a:hover span:after {
    transform: translateX(0%) scaleX(1);
}

説明 :

1. :after : アンダースコア線を表す擬似要素。
   • position: absolute : テキストの下に行を配置します。
   • transform: translateX(-50%) scaleX(0) : デフォルトでは、線は水平方向の縮小効果で非表示になります。
   • transition: transform 250ms : 250ms のスムーズなトランジションを追加します。
2. :hover :
   • ユーザーがリンク上にマウスを移動すると、水平方向に伸びて線が表示されます。 scaleX(1)。

ステップ 3: 最終結果

HTML と CSS を適用した後の結果は次のとおりです。

• シンプルでおしゃれなメニューです。
• ユーザーがリンク上にマウスを移動すると、滑らかなアニメーションで線が表示されます。

考えられる改善点

• カスタムカラー : で線の色を変更できます。 background-color あなたのデザインに合わせて。
• 線の太さ : の値を変更します。 height で :after 細い線にも太い線にも。
• アニメーションの長さ ： 調整する transition: transform 250ms エフェクトを加速または減速します。
• 中心から端までトレースする : 線が中央から端に向かって伸びるようにアニメーションを変更できます。この効果の CSS を調整する方法は次のとおりです。

  .menu ul li a span:after {
      content: '';
      position: absolute;
      left: 50%; /* Positionnement initial au centre */
      bottom: 0;
      transform: translateX(-50%) scaleX(0);
      width: 100%;
      height: 2px;
      background-color: #000;
      transition: transform 250ms;
  }
  .menu ul li a:hover span:after {
      transform: translateX(-50%) scaleX(1);
  }
  

  説明:

  • の left: 50% 行をテキストの下に水平方向に中央揃えします。
  • transform: translateX(-50%) 行の中心がテキストと位置合わせされたままになります。
  • 値を増やすことで scaleX(0) もっている scaleX(1) ホバーすると、追加の変更を必要とせずに、アニメーションが自然に中心から始まります。

  この変更により、テキストの中心から端まで線が「はじけた」ように見える効果が得られ、さらに洗練された視覚的なタッチが追加されます。

結論

このチュートリアルでは、HTML と CSS のみを使用して、リンクにインタラクティブでスタイリッシュな下線効果を作成する方法を示します。この効果は軽くて高速で、メニューをより動的にすることでユーザー エクスペリエンスが向上します。プロジェクトに追加すると、モダンでプロフェッショナルなナビゲーションが実現します。