在另一個跨度之前和之後設置跨度位置

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>