Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1171" href="#article" aria-label="Notes on Form, 記事へ"><span>Notes on Form</span><span class="tbx-1171__mark" aria-hidden="true">.</span><small>— ISSUE 04</small></a>
CSS
.tbx-1171{display:inline-flex;align-items:baseline;gap:1px;position:relative;text-decoration:none;color:#192c3c;font:600 29px/1.2 Georgia,serif;letter-spacing:-.055em;padding:22px 5px 12px;max-width:100%}.tbx-1171__mark{display:inline-block;color:#e87563;font-size:42px;line-height:0;transform-origin:50% 80%;transition:transform .5s cubic-bezier(.2,.9,.3,1)}.tbx-1171 small{align-self:flex-start;margin-left:9px;font:700 9px/1.4 system-ui;letter-spacing:.12em;color:#688391;white-space:nowrap}.tbx-1171::after{content:'';height:1px;background:#b1c5ca;position:absolute;left:4px;right:6px;bottom:6px;transform:scaleX(.15);transform-origin:left;transition:transform .48s}.tbx-1171:is(:hover,:focus-visible) .tbx-1171__mark{transform:rotate(-42deg) translate(1px,-13px)}.tbx-1171:is(:hover,:focus-visible)::after{transform:scaleX(1)}.tbx-1171:focus-visible{outline:3px solid #197888;outline-offset:3px}@media(max-width:350px){.tbx-1171{font-size:24px}.tbx-1171 small{display:none}}
@media (prefers-reduced-motion: reduce) { .tbx-1171, .tbx-1171 *, .tbx-1171::before, .tbx-1171::after, .tbx-1171 *::before, .tbx-1171 *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Article / Editorial
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーがなくても必要な情報にアクセスできる実装を推奨。
Browser：Chrome・Firefox・Safari・Edgeの現行版を想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。