Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1148" href="#glossary"><span class="tbx-1148__term">Core Web Vitals <span aria-hidden="true">↗</span></span><span class="tbx-1148__definition">ページ体験を測る指標</span></a>CSS
.tbx-1148{box-sizing:border-box;position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px;width:min(314px,100%);padding:21px 12px;border-bottom:2px solid #98b0c5;color:#23435b;font-family:system-ui,sans-serif;text-decoration:none;overflow:hidden;min-height:100px}
.tbx-1148__term{font-size:17px;font-weight:800;white-space:nowrap;transition:color .28s}.tbx-1148__term span{font-size:14px;color:#6686a0}
.tbx-1148__definition{position:relative;display:inline-flex;align-items:center;min-height:26px;padding:4px 10px;border-radius:5px;background:#dceaf5;color:#355672;font-size:11px;font-weight:700;opacity:0;transform:translateX(-16px);transition:transform .38s cubic-bezier(.2,.75,.2,1),opacity .34s;pointer-events:none}
.tbx-1148:is(:hover,:focus-visible) .tbx-1148__definition{opacity:1;transform:translateX(0)}.tbx-1148:is(:hover,:focus-visible) .tbx-1148__term{color:#176e9c}
.tbx-1148:focus-visible{outline:3px solid #5f91b5;outline-offset:3px}
@media (prefers-reduced-motion: reduce) { .tbx-1148, .tbx-1148 *, .tbx-1148::before, .tbx-1148::after, .tbx-1148 *::before, .tbx-1148 *::after { animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Documentation / Education
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバー効果に依存しない導線を維持してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。