Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1111" href="#journal"><span class="tbx-1111__idx" aria-hidden="true">04</span><span class="tbx-1111__copy"><small>JOURNAL / ART & DESIGN</small><strong>伝わる余白のつくり方</strong><span class="tbx-1111__rule" aria-hidden="true"></span><em>記事を読む →</em></span></a>
CSS
.tbx-1111{display:flex;position:relative;align-items:center;width:min(286px,100%);height:147px;background:#f3f1eb;border:1px solid #e3ddd1;text-decoration:none;color:#273f4c;font-family:system-ui,sans-serif;overflow:hidden;padding:19px}
.tbx-1111__idx{position:absolute;font:bold 95px/1 Georgia,serif;color:#bed1cf;left:-10px;top:21px;opacity:.15;transform:translateX(-30px);transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s;pointer-events:none}.tbx-1111__copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;width:100%}.tbx-1111 small{font-size:9px;letter-spacing:.12em;color:#517d78;font-weight:750}.tbx-1111 strong{font-size:16px;letter-spacing:-.03em;white-space:nowrap}.tbx-1111__rule{height:1px;background:linear-gradient(to right,#3d786f 0 0,#d5ddd5 0);position:relative}.tbx-1111__rule::after{content:"";position:absolute;inset:0;background:#367a70;transform:scaleX(.12);transform-origin:left;transition:transform .5s}.tbx-1111 em{font-size:10px;font-style:normal;font-weight:800;color:#367a70}
.tbx-1111:is(:hover,:focus-visible) .tbx-1111__idx{transform:translateX(22px);opacity:.55}.tbx-1111:is(:hover,:focus-visible) .tbx-1111__rule:after{transform:scaleX(1)}
.tbx-1111:focus-visible{outline:3px solid #6da69c;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1111 *,.tbx-1111__rule:after{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Editorial / Navigation
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では実際のリンク操作を優先し、必要な情報は通常状態でも提供してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。