Как отобразить горизонтальную линию до и после заголовка в CSS ⇐ Jquery

[Anonymous]

Я пытаюсь создать заголовок HTML в CSS, но не получаю правильный результат, как показывает мой jsfiddle: https://jsfiddle.net/Nadjanara/nmo0245t/.
Ниже приведены HTML и CSS. коды:

Код: Выделить всё

Heading2

h2{
width:100%;
text-align:center;
border-bottom: 1px solid #000;
line-height:0.1em; margin:10px 0 20px;
}
h2 span{
padding:0 10px;
}

Как разместить горизонтальную линию только до и после заголовка, а также контролировать ширину линии, чтобы она не занимала всю ширину экрана?

Подробнее здесь: https://stackoverflow.com/questions/382 ... ing-in-css