在另一个跨度之前和之后设置跨度位置

Question

有一个很好的定位（％）的span，我必须在之前和之后设置一个文本。该位置仅限于span。

这已经是positionned跨度：

<span style="left: 50%;display:block;position:absolute;top:-20px;font-size:12px;">↓</span> 

事实上，↓只是一个进度之前定位，以指示一个值，所以50％表示进度的中间。

所以要添加文字，我试图让这一点，但它不工作：

<span style="display:inline;position:absolute;top:-20px;font-size:12px;">Before</span> 
<span style="left: 50%;display:inline;position:absolute;top:-20px;font-size:12px;">↓</span> 
<span style="display:inline-block;position:absolute;top:-20px;font-size:12px;">After</span> 

应用程序是在多个语言，所以用“以前”的文字和“之后”可以改变，所以我们不能说好，“以前的文字”需要10px，所以我们将贴花...

箭头必须保持原样！

在此先感谢帮助我:-)

Answer 1

you could try something of the sort, just try to style it as your choice 
<style> 
#container{ width:300px; position:relative; height:30px;} 
label{float:left;} 
#1 { width:5%;} 
#2 {width:10%; position:absolute; left:50%;} 
</style> 

<div id="container"> 
<div> 
<label id="1">befoure</label ><label id="2">arrow</label><label id="3">After</label> 
</div> 
</div>