画像でアンダーライン
画像を使って少し変わったアンダーラインが作成できます。
用意する画像は次のような画像です。
要素の背景画像をx方向にリピートし、padding-bottomを取ります。
a {
text-decoration: none;
background: url(img/underline.gif) repeat-x 100% 100%;
padding-bottom: 4px;
white-space: nowrap;
}
a:hoverと組み合わせる場合、次のようになります。
a {
padding-bottom: 4px;
white-space: nowrap;
}
a:hover {
background: url(img/underline.gif) repeat-x 100% 100%;
}