将文本居中放在水平线的前面

Question

我正在寻找一个我将以编程方式生成的进度条。我充其量只是新手。 Here是我迄今为止所拥有的;使用this question中的提示。

理想情况下，我会设计以下简单的HTML样式，但我愿意添加更多标签：

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

两个，也许是3个问题：

• 现在，“文本在线”是通过在文本顶部使文本变为白色来完成的。这最终切入绿色背景。为了避免这种情况，我想我需要有文字（没有背景颜色）和两边的线条？
• 显然我的格式/边距/偏移是一团糟，并且框顶部/ hr对齐不太正确（看起来顶部文本需要向上移动几个像素或容器向下移动几个像素，但我这样做很麻烦。）

关于更清洁的解决方案的想法让我成为我想去的地方？

Answer 1

我为你创造了一个工作小提琴。 http://jsfiddle.net/avrahamcool/QpWqd/46/

主要技巧是区分h2元素的白色背景和文本，使每个元素具有不同的z-index。 背景和文字都在边框上方。 但绿色背景介于白色和文字之间。

所以图层是：

1. 边界
2. h2标签的白色背景
3. 绿色背景
4. 文本

经过测试： IE10，FF，Chrome