新着
アニメーションFade In On Scroll
Content that fades and rises into place as it enters the viewport.
#scroll#reveal#fade
6 個のフレームワーク中級
Loading…
A link whose underline scales in from the left on hover and focus.
<style>
.underline-grow { position: relative; display: inline-block; }
.underline-grow::after {
content: '';
position: absolute;
left: 0; bottom: -2px;
height: 2px; width: 100%;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.underline-grow:hover::after, .underline-grow:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .underline-grow::after { transition: none; } }
</style>
<a href="#" class="underline-grow font-semibold text-gray-900 focus-visible:outline-none dark:text-gray-100">Product</a>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
children必須 | ReactNode | - | コンポーネントの内部にレンダリングされるコンテンツ。 |
href | string | '#' | カードのリンク先。 |
className | string | '' | ルート要素にマージされる追加クラス。 |
Drop it into any nav; the underline uses currentColor so it inherits the link color. Reduced motion removes the transition.