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

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

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

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

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

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

admin

cl0606

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です