2014年9月30日火曜日

CSS: 複数行に余白付きの下線を引く

CSS の text-decoration: underline で下線を引くことができますが、文字との余白が狭いため見た目上使いづらい場合があります。

こちらのサイトのやり方が上手く使えました。
--
ノートのように罫線(下線)を引くデザイン
http://allabout.co.jp/gm/gc/24003/
--

方法としては
line-height と同じ高さの画像(下部に点線入)を準備して、
背景画像として縦横に 繰り返し表示することで実現しています。

line-height と画像の高さを合わせることで、
縦方向に繰り返した際に1行ずつ丁度点線が同じ位置に入るようになります。

0 件のコメント:

コメントを投稿