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

Question

有一个span很好的定位（以％为单位），我必须在它之前和之后设置一个文本。该位置仅针对span.

这是已经定位的跨度：

<span style="left: 50%;display:block;position:absolute;top:-20px;font-size:12px;">↓&lt;/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;">↓&lt;/span>
<span style="display:inline-block;position:absolute;top:-20px;font-size:12px;">After</span>

该应用程序有多种语言，因此使用“之前”和“之后”的文本可以更改，所以我们不能说好的，“之前文本”需要 10 像素，所以我们将贴花......

箭头必须保持在原位！

提前感谢帮助我:-)

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>