どのようにCSSの文字をカバーするタイトルに上の境界線を置く

Question

私はタイトルのための装飾的な境界を置こうとしますが、境界は親のサイズに成長します。私は文字だけをカバーする必要があります（例：のみ「THISについて」の長さ）：

h1 { 
 
    border-top: 6px solid black; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="col-md-4 text-right col-sm-5"> 
 
          <h1>About THIS</h1> 
 
         </div> 
 
         <div class="col-md-6 col-sm-7"> 
 
          <hr class="visible-xs"> 
 
          <h2 class="bold"> Hello there.</h2> 
 
          </div>

Answer 1

あなたは<h1>の表示properyを変更する必要があり、現在、それはブロック要素です親divの幅を埋めるようになります。

h1 { 
 
    border-top: 6px solid black; 
 
    display: inline-block; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div class="col-md-4 text-right col-sm-5"> 
 
    <h1>About THIS</h1> 
 
</div> 
 
<div class="col-md-6 col-sm-7"> 
 
    <hr class="visible-xs"> 
 
    <h2 class="bold"> Hello there.</h2> 
 
</div>