文字と同じ幅で下線を引きたいのですが。。

質問

文字の下に下線をスタイルシートを使って引きたいと考えています。

方法は <h1>ほげほげ</h1>とhで囲みスタイルシートで下線を設定しています。

しかし文字と同じ幅で下線を引く方法が分かりません。よろしくお願いいたします。

回答No.3

Kuppycat · ベストアンサー

#1です。

#2のかたがおっしゃっているとおり、<h1>はブロック要素なので<span>を使ってインライン形式で指定しなければいけません。
<h1>をインライン形式にすることもできますがお勧めしません。

なので、たとえば

.UL { border-bottom:2px solid #ff0000; }

とCSSを設定し

<h1><span class="UL">さんぷる</span></h1>

としてはいかが？

お礼

回答ありがとうございました。

何とかうまくいきました。ありがとうございました。

回答No.2

noname#21168

<h1><span style="border-bottom:1px solid #000">ほげほげ</span></h1>

↑これでいかがでしょうか？

<h1>に対してborderを指定すると行全体に下線が引かれてしまうので，防ぐためには<span>を利用します。

（質問の意図をそのように理解しました）

お礼

回答ありがとうございます。

<span>をいれないで出来る方法はありませんでしょうか？実際に更新時の時に簡単にするため出来るだけ<h1>などで囲みたいと思っています。

よろしくお願いいたします。

回答No.1

Kuppycat

h1 { text-decoration: underline; }

で、できるはずですよ。

お礼

回答ありがとうございます。

このテキストデコレーションの線の太さや色などスタイルシートで調整できますか？