Строка после заголовка (css)

Question

Как создать такую ​​строку? (Проверьте комментарии для скриншота)

Я уже пытался сделать новый DIV после h1, а затем стиль ее

 margin-left: 70px; 
    border-top: solid 2px #ffffff; 
    width: 46.4%; 
    margin-top: -27px; 
    position: absolute; 

Но линия не достаточно долго ...

Как это самый умный способ сделать эти строки? Таким образом, они имеют ту же длину, что и div, они занимают место. И не делая мобильный сайт слишком широким?

Answer 1

Вы можете использовать: после псевдо элемента без добавления каких-либо DIV как этот

h2 { 
    position: relative; 
} 

h2:after { 
    position: absolute; 
    top: 50%; 
    content: ""; 
    height: 1px; 
    background-color: #000; 
    width: 100%; 
    margin-left: 10px; 
} 

Demo