src/assets/sass/global/mixins/ に、any-hover・:focus-visible・リンクの opacity 打ち消しなどを含めたホバー用 Sass mixin を置いている。コンポーネント SCSS では @use '../global' as *; のあと @include で呼び出す。各セクションに、このデモで使っている mixin を記載している。
下線
@include hover-text-underline();
下線：左から右へ（１行・CSSのみ）
@include hover-text-underline-span-before(); — 直下 span 必須
下線：左から右へ（複数行・CSS＋JS）
mixin なし — [data-hover-underline]（utility/_data-hover-underline.scss + JS）