CSS Anchor Positioningを利用してホバーで追従するボーダーを作る

はじめに

今回は、このブログの記事一覧ページのホバーアニメーションをCSSのAnchor Positioningを利用した、ホバーでボーダーが追従するアニメーションに改修しましたので、その方法を解説します。

記事一覧ページのアニメーション

このようなアニメーションは、従来はJavaScriptを使用しないと実装できませんでしたが、現在ではCSSのAnchor Positioningを利用することで、手軽に実装できるようになりましたのでその方法を解説します。

👇はCodePenのデモです！

CSS Anchor Positioningとは

CSS Anchor Positioningは、CSSの新しいプロパティで、他の要素（アンカー）を基準として要素の位置を指定できるためWeb開発においてより便利な機能になります。この機能を使うことで、メニューやサブメニュー、ツールチップなどのUI機能の複雑なレイアウト要件を簡易的に実装できるようになります。

今回の場合は、このCSS Anchor Positioningを利用して、ホバーでボーダーが追従するアニメーションを実装します。

Anchor Positioningのサポート状況

Anchor Positioningは、執筆時点(2025/07)ではChromeとEdge、Safariが26.0以上からサポートしており、Firefoxではまだサポートされておりません。

そこで、Anchor Positioningをサポートしていないブラウザでは、ホバーしたら通常のボーダーを表示するだけのフォールバックを行うようにします。こちらは解説の最後で説明します！

実装方法

それでは、実際にAnchor Positioningを使ってホバーで追従するボーダーを作ってみましょう。

HTML

まずは、HTMLを作成します。

index.html

<div class="card__wrapper">
  <div class="card__border"></div>
  <div class="card">
    <div class="card__img">
      <img src="https://picsum.photos/300/200?random=0" alt="">
    </div>
    <div class="card__body">
      <h2>タイトル01</h2>
      <p>Lorem ipsum dolor sit amet consectetur.</p>
    </div>
  </div>
  // カードの数だけ繰り返す
</div>

カードを並べるためにcard__wrapperクラスを付与したdivタグを作成し、その中にカードを作成します。ホバーで追従するボーダーはcard__borderクラスとし、card__wrapperの中に配置します。

CSS

CSSは下記の通りです。

style.css

.card__wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: relative;
 
  &:hover .card__border {
    opacity: 1;
  }
}
 
.card {
  padding: 1rem;
  position-anchor: --card;
 
  &:hover {
    anchor-name: --card;
  }
}
 
.card__border {
  position: absolute;
  border-radius: 0.5rem;
  border: 2px solid #E8EAED;
  pointer-events: none;
  opacity: 0;
  transition-property: left, top, width, height;
  transition-duration: 0.3s;
 
  /* anchorの位置・サイズに従って追従させる */
  left: anchor(--card left);
  top: anchor(--card top);
  width: anchor-size(--card width);
  height: anchor-size(--card height);
}

それでは、解説していきます。

.card

.card {
  position-anchor: --card;
}

Anchor Positioningを使用するためにposition-anchorプロパティを使用します。ここでは、--cardという名前のAnchorを作成します。

.card {
  &:hover {
    anchor-name: --card;
  }
}

.cardをホバーしたら、この要素を「アンカー」として扱うためにanchor-nameプロパティに--cardを指定します。

.card__bg

.card__border {
  position: absolute;
  border-radius: 0.5rem;
  border: 2px solid #E8EAED;
  pointer-events: none;
  opacity: 0;
  transition-property: left, top, width, height;
  transition-duration: 0.3s;
 
  /* anchorの位置・サイズに従って追従させる */
  left: anchor(--card left);
  top: anchor(--card top);
  width: anchor-size(--card width);
  height: anchor-size(--card height);
}

card__borderは、.cardをアンカーとして、その位置・サイズにぴったり追従します。

ぴったり追従するために、left、top、width、heightにanchor関数を使用して、それぞれの値をアンカーの位置・サイズに合わせています。ここで、transitionはこの位置の移動のみに適用したいので、transition-propertyにはこの4つのプロパティを指定しています。

Anchor Positioningのプロパティの説明

ここで今回使用した、Anchor Positioningのプロパティの役割については以下の通りです。

プロパティ	役割
`position-anchor: --xxx;`	この要素はアンカー候補になる（位置を与える）
`anchor-name: --xxx;`	実際にアンカーとして参照される名前
`anchor(--xxx left)` など	アンカー要素の位置を参照
`anchor-size(--xxx width)` など	アンカー要素のサイズを参照

ホバーしたらボーダーを表示する

このままだと、ホバーしなくても左上にcard__borderが表示されてしまうので、ホバーしたらボーダーを表示するようにします。そのためには、カードを並べているcard__wrapperがホバーしたら、card__borderのopacityを1にして表示するようにします。

.card__wrapper {
  &:hover .card__border {
    opacity: 1;
  }
}

以上が、Anchor Positioningを利用してホバーで追従するボーダーを作る解説になります。

Anchor Positioningをサポートしていないブラウザの対応

先述の通りにAnchor Positioningをサポートしていないブラウザに対しては、@supportsを使用して、ホバーしたら背景色を表示するだけのフォールバックを行いましょう。

@supports not (anchor-name: --card) {
  .card {
    border: 2px solid transparent;
    transition: 0.3s;
 
    &:hover {
      border-color: #E8EAED;
    }
  }
}