Центрирование текста перед горизонтальным правилом

Question

Я ищу, чтобы создать индикатор выполнения, который я буду генерировать программно. В лучшем случае я новичок в css. Here - вот что я до сих пор; используя советы от this question.

В идеале, я бы стилизовать следующий простой HTML, но я открыт для добавления метки:

<div id="container"> 
<h2><span>Goal</span></h2> 
<div id="bgblock"></div> 
    <h2><span>So Far</span></h2> 
</div> 

Two, возможно, 3 выпуска:

• Прямо сейчас «текст по линии "выполняется, делая текст белым, поверх строки. Это заканчивается резкой на зеленом фоне. Чтобы этого избежать, я думаю, мне нужно иметь текст (без цвета фона) и строки по обе стороны от него?
• Очевидно, что мои форматирование/поля/смещения являются беспорядком, а верхняя граница рамки/hr выравнивания не совсем правильная (кажется, что верхний текст должен быть сдвинут на пару пикселей или контейнер на пару пикселей, но у меня проблемы с этим).

Мысли о более чистом решении, которое позволяет мне, где я хочу быть?

Answer 1

Я создал рабочую скрипку для вас. http://jsfiddle.net/avrahamcool/QpWqd/46/

Главный фокус в том, чтобы отличать белый фон и текст от h2 элементов, предоставляя каждому другому z-index. и фон, и текст над границей. , но зеленый фон находится между белым и текстом.

поэтому слои:

1. граница
2. белый фон h2 тег
3. зеленый фон
4. текст

Проверено на: IE10, FF, Chrome