ヘッダーの境界線の長さを編集する

Question

ヘッダーの境界線の長さをテキストより少し長く設定するにはどうすればよいですか？このコードで それは、すべてのページの長さを取ります。

<div style="position:relative;"> 
    <h3 style="text-align:center; border-bottom:solid;">This is a test</h3>  
</div> 

私もこのコードを試してみた：

<div style="position:relative;">  
     <h3 style="text-align:center;"><span style="border-bottom:solid;"> This is a test</span></h3>   
</div> 

しかし、それは正確にテキストの長さをとり、最後のコードで、どのように私はできましたボーダーボトムの長さをそれより少し長く設定しますか？

Answer 1

paddingを左側に使用&右<h3>を使用してください。

.text-holder { 
 
    text-align: center; 
 
} 
 

 
.text { 
 
    display: inline-block; 
 
    padding: 0 10px; 
 
    border-bottom: 3px solid; 
 
}

<div class="text-holder"> 
 
    <h3 class="text">This is a test</h3>  
 
</div>

・ホープ、このことができます：以下のスニペットを見て！

Answer 2

ボーダーを拡張するために、左/右のパディングを<span>に追加します。

<h3 style="text-align:center;"> 
 
    <span style="border-bottom:solid; padding: 0 10px;"> This is a test</span> 
 
</h3>

h3 span { 
    padding: 0 10px; /* Increase left/right padding to extend borders */ 
} 

注：私は、彼らは悪い習慣と考えられているとして、インラインスタイルを使用することを好みません。私はあなたの問題に対する可能な解決策のアイデアとしてのみこれを示しました。ほとんどの場合、外部スタイルシートを使用するのが最良の選択です。