ノート風の罫線を作成する方法

ノート風の罫線を作成する方法です。

cssで文字罫線を付ける場合text-decorationでunderlineを設定するかと思いますが、
文字のある領域のみしか下線が引かれません、

ノート風に文字に下線を引きたい場合には専用の画像を作成しbackgroundでrepeatで設定してあげると実現可能です。

使用する画像は文字サイズを含めた高さに下線が設定されている画像です。
↓↓

.underline {
    background: url(underline.png) repeat bottom ;
    font-size: 14px;
    line-height: 30px;
}