установить динамическую ширину только с помощью CSS?

У меня есть заголовок (h1), который располагается по центру страницы. Я хочу добавить строки слева и справа от заголовка, чтобы они заполняли остальную ширину страницы. Однако я хочу, чтобы строки адаптировались к ширине заголовка, которая является динамической. Итак, я хочу, чтобы ширина линии вычислялась динамически.

Вот пример того, что я пытаюсь сделать: http://jsfiddle.net/cAEqE/1/

В примере я установил ширину линий на 35%, чтобы они могли получить эффект, который я хочу. Однако, если заголовок будет длиннее, он разобьется на 2 строки, а я не хочу, чтобы это произошло.

Мой начальник посоветовал мне избегать JavaScript, поэтому было бы лучше использовать только CSS. Однако, если это окажется невозможным, я обращусь к старому доброму jQuery. Ваше здоровье!

Редактировать: на веб-сайте есть фоновое изображение, поэтому я не могу использовать фон для h1. Спасибо!