Как поставить верхнюю границу заголовка, который охватывает только буквы в css

Question

Я пытаюсь поставить декоративную рамку для названия, но граница будет расти до размера родителя. Мне нужно только покрыть буквы (т.е. только по длине «об этом»):

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>, в настоящее время это блочный элемент поэтому заполнит ширину родительского 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>