[CSS] 複数行のテキストに点線のアンダーラインをCSSで実現する方法。

プロパティの値としては、無い機能。しかし、display:inline;にすると実現する。
ブラウザによって点線の外観が微妙に変わるのが欠点。

サンプル [mac]fx3,safari4,opera10

アンダーラインを点線にする方法。アンダーラインの色を変える方法。 アンダーラインを点線にする方法。アンダーラインの色を変える方法。

  • padding で点線とテキストの間隔を調整できる。
  • line-height でテキストの行間を調整できる。

サンプルソース

<p style="border-bottom:1px #ff0000 dotted; display:inline;">アンダーラインを点線にする方法。アンダーラインの色を変える方法。
アンダーラインを点線にする方法。アンダーラインの色を変える方法。</p>

サンプル(下線を画像で。) [mac]fx3,safari4,opera10
※ieでは実現できません。

画像で下線はieで実現できないから全く実用性がないwww

  • ieで実現不可。
  • display:inline;だからline-heightで行間を調整できる。
  • paddingで文字と下線との間隔を調整できる。

アンダーラインを点線にする方法。アンダーラインの色を変える方法。 アンダーラインを点線にする方法。アンダーラインの色を変える方法。

サンプルソース(下線を画像で。)

<p style="background:url(/img/dott_line.png) 0 100% repeat-x; display:inline; line-height:200%; padding:0 0 3px;">アンダーラインを点線にする方法。アンダーラインの色を変える方法。
アンダーラインを点線にする方法。アンダーラインの色を変える方法。</p>

カテゴリ:

トラックバック(0)

トラックバックURL: http://www.0yen-coding.com/mt-tb.cgi/149

コメントする

あわせて読みたいブログパーツ