Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<ul class="tbx-1081"><li tabindex="0"><span aria-hidden="true">✓</span><b>スマートフォン最適化</b></li><li tabindex="0"><span aria-hidden="true">✓</span><b>更新しやすい管理画面</b></li><li tabindex="0"><span aria-hidden="true">✓</span><b>継続的な運用サポート</b></li></ul>
CSS
.tbx-1081{list-style:none;padding:8px 14px;margin:0;width:min(300px,100%);background:#fff;border:1px solid #d8e3e9;border-radius:8px;font:11px/1.4 system-ui,sans-serif;color:#3a5360}
.tbx-1081 li{position:relative;display:flex;align-items:center;gap:14px;padding:15px 1px;outline-offset:-3px;border-bottom:1px solid #e9eef2;cursor:default}
.tbx-1081 li:last-child{border-bottom:0}.tbx-1081 li:after{position:absolute;content:"";left:0;right:0;bottom:0;height:2px;background:#70ada3;transform:scaleX(0);transform-origin:left;transition:transform .34s}
.tbx-1081 li span{width:26px;height:26px;display:grid;place-items:center;border:1px solid #b7cfcc;border-radius:50%;font-size:14px;color:#5f9a92;flex:0 0 26px;transition:background .27s,transform .27s,color .27s}.tbx-1081 li b{font-size:11px;transition:transform .3s;font-weight:700}
.tbx-1081 li:is(:hover,:focus-visible):after{transform:scaleX(1)}.tbx-1081 li:is(:hover,:focus-visible) span{background:#488f86;color:white;transform:scale(1.1)}.tbx-1081 li:is(:hover,:focus-visible) b{transform:translateX(5px)}.tbx-1081 li:focus-visible{outline:2px solid #d9aa70}
@media(prefers-reduced-motion:reduce){.tbx-1081 *,.tbx-1081 li:after{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Services / Landing Page
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末にはリンクの本来の役割を残し、必要な説明は通常時にも読める形にしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。