Линия до правого поля страницы с помощью CSS ⇐ CSS

[Anonymous]

Я хотел бы, чтобы за заголовками h1 следовала толстая линия, идущая к правому краю страницы.
Примерно так:


за исключением того, что мне нужны все черные линии заканчиваются в одной и той же точке справа - независимо от длины содержимого h1.
Я зашел так далеко:

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

body {
background-color: #9E7046
}

body * {
font-family: 'Helvetica'
}

h1 {
font-size: 200pt;
color: #E8E8E8;
margin-top: 10vh;
margin-left: 1em
}

h1:after {
background-color: #262626;
content: "";
display: inline-block;
height: 36px;
position: relative;
vertical-align: bottom;
width: 50%;
top: -52px
}

h1:after {
left: 0.2em;
margin-right: -50%;
width: 12em;
}

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

Short
Longer
Very
long

но я не могу понять, как заставить строки иметь переменную длину и заканчиваться в той же точке по оси X.
Как это сделать с помощью CSS (без JavaScript)?

Подробнее здесь: https://stackoverflow.com/questions/763 ... e-with-css