画像でアンダーライン

画像を使って少し変わったアンダーラインが作成できます。

customunderline

用意する画像は次のような画像です。

要素の背景画像を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%;
}