フリーフォント

Penguins

漫勉

まんべん

フリーベクター素材

Tulips

CSSで見出しの文字部分だけに下線

CSSで見出しの文字部分だけに下線

解決方法1 : cssの見出しにdisplay:inline-block;を使う

h1 {display:inline-block;
    border-bottom:3px solid #FF0000;}

見出しタグに display: inline-block; を指定することですぐに解決します。

解決方法2 : <span>タグで囲む

span.red	{border-bottom:3px solid #FF0000;}
				

単純にspanタグで囲むのもOK。<h1><span class=”red”> </span></h1> でも同じ結果となります。

<h1><span class=”title”>見出し部分</span></h1>
#header h1 span.title {
display: inline;
padding: 2px 0.5em;
border-bottom: 2px solid #f00;
font-size: 130%;
font-weight: bold;
}

Follow me!

HTML・CSS

Posted by art