Подчеркнутый заголовок - более узкая линия

Question

Я хочу создать что-то вроде этого.

Я действительно устал, потому что я могу создать только линию с подобной шириной, как заголовок. Я должен создать «меньшую» строку, затем заголовок. Пробовал сделать это с :: раньше, но это не работает для меня. Есть ли способ создать его.

<h1>Some heading here</h1> 

http://jsfiddle.net/53zxor2k/

Answer 1

h1 { 
 
    position: relative; 
 
    text-align: center 
 
} 
 

 
h1:before{ 
 
    content: ''; 
 
    position: absolute; 
 
    left: 50%; 
 
    bottom: -6px; 
 
    width: 130px; 
 
    height: 2px; 
 
    background: red; 
 
    transform:translateX(-65px) /* width/2 */ 
 
} 
 
    
 

<h1>some heading here</h1>

Answer 2

<h1>some <span style="border-bottom: 2px solid red;">heading</span> here</h1> 

Вы можете просто поставить границу под определенным словом, если это то, что вы пытаетесь сделать.

Answer 3

h1 { 
    display: inline-block; 
    position: relative; 
} 
h1::after { 
    content: ''; 
    position: absolute; 
    left: 10%; 
    display: inline-block; 
    height: 1em; 
    width: 70%; 
    border-bottom: 1px solid; 
    margin-top: 5px; 
} 

Изменение ширины, как долго вы хотели бы быть, и «влево», где линия находится, и увеличение «маржи-топ», чтобы сделать его подальше от текста.

http://jsfiddle.net/53zxor2k/1/