Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#article" class="tbx-1087"><small>EDITOR'S PICK / 2026</small><span class="tbx-1087__title">Better <em>Digital</em><br>Experiences <span aria-hidden="true">↗</span></span><span class="tbx-1087__more">記事を読む <b aria-hidden="true">→</b></span></a>
CSS
.tbx-1087{display:flex;flex-direction:column;justify-content:center;width:min(285px,100%);min-height:160px;padding:23px 20px 15px;border-bottom:1px solid #b8c7c8;color:#243943;background:#fff;text-decoration:none;font-family:system-ui,sans-serif}
.tbx-1087 small{font-size:9px;font-weight:750;letter-spacing:.16em;color:#739c99}.tbx-1087__title{font:750 24px/1.22 Georgia,serif;letter-spacing:-.035em;margin:15px 0 13px}
.tbx-1087__title em{transition:color .34s;font-style:normal;position:relative;z-index:0;white-space:nowrap}.tbx-1087__title em:after{content:"";position:absolute;z-index:-1;left:0;bottom:2px;height:9px;background:#f7ca77;width:100%;transform-origin:left;transform:scaleX(.08);opacity:.55;transition:transform .48s cubic-bezier(.2,.8,.2,1),opacity .48s}
.tbx-1087__title span{color:#5c9996;font-family:system-ui,sans-serif;font-size:20px}.tbx-1087__more{font-size:10px;font-weight:700;letter-spacing:.07em;color:#487e80}.tbx-1087__more b{font-size:13px;margin-left:5px;transition:margin .3s}
.tbx-1087:is(:hover,:focus-visible) .tbx-1087__title em{color:#117c75}.tbx-1087:is(:hover,:focus-visible) .tbx-1087__title em:after{transform:scaleX(1);opacity:1}.tbx-1087:is(:hover,:focus-visible) .tbx-1087__more b{margin-left:13px}
.tbx-1087:focus-visible{outline:3px solid #d4a663;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1087 *, .tbx-1087__title em:after{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Editorial / Links
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では本来のリンク・操作を優先し、必要な情報は通常状態でも理解できるようにしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。