sikaku

• gif
• 240*2
• borderline dotted

ドット線を引くスタイルシート、border-bottom: dotted 1px #999999;の代わりにどうでしょう。

スタイルシートだと線の色は指定したカラーコードの一色のみですが、画像を使えばこのようにカラフルな線を引くことができます。

<a>や<span>等のインライン要素におすすめです。

>>CSS

1. 要素名 {
2. padding-bottom: 2px;
3. background-image: url(画像URL);
4. background-repeat: repeat-x;
5. background-position: left bottom;
6. background-size: 120px 1px;
7. }

素材原寸大の2pxのドットで良い場合は06行目は不要になります。

ボーダーと文字の間隔を変更したい場合はpadding-bottom: 2px;を編集したり、line-height: 値;を追加するなど調節をしてください。

>>Sample (text by MotherGoose)