マウスホバーで下線が広がるCSS作成ツール
リンクにマウスを乗せた際、中央から左右にアニメーションしながら下線が広がるCSSジェネレーターです。
プレビュー
文字色:
線色:
<a href="#" class="hover-underline">{{text}}</a>.hover-underline {
position: relative;
display: inline-block;
text-decoration: none;
font-size: {{size}}px;
color: {{color_text}};
}
.hover-underline::before {
content: '';
position: absolute;
left: 50%;
bottom: {{bottom_pos}}px;
width: 0;
border-bottom: solid {{border_width}}px {{color_line}};
transform: translateX(-50%);
transition: {{duration}}s;
}
.hover-underline:hover::before {
width: {{line_width}}%;
}機能・使い方
- マウスホバー時に中央から下線が広がるアニメーションリンクを作成します。
- ホバー時の線の長さ（幅）、線の色、太さ、アニメーション速度などを調整できます。
text-decoration: noneを適用し、既存の下線を消して独自の下線を表示します。
CSSプロパティの説明
text-decorationは使用せず、代わりに::before擬似要素を絶対配置して下線を作成しています。
これにより、線の太さや位置、ホバー時のアニメーション（中央から広がる動きなど）を自由にカスタマイズ可能にしています。
