画像を使って少し変わったアンダーラインが作成できます。
用意する画像は次のような画像です。
要素の背景画像を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%; }
Copyright 1997-2010 BBB All rights reserved.