Javascript 以图标作为指针的引导进度条

因此，我试图创建这个动态进度条来显示某些值，唯一的问题是图标不精确，它在右侧和左侧溢出。图片清晰，问题出在红色圆圈内的图标上。提前谢谢你的帮助

这是HTML部分：

enter code here
 <div class="progress p-0 m-0" style="background-color: #696969; height: 30px; width :100%">
           <div id="pointerRealise" class="progress"  style="background-color: #00ff01; height: 30px; ">
            <div id="pointerCible" class="bar-step" style="left: 100%">

             <div class="fa-3x">
              <span class="fa-layers fa-fw" style="background:MistyRose">
<i class="fa fa-arrow-down" data-fa-transform="grow-40"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 up-2" style="font-weight:1000">
<?php // echo number_format($cibEnPRct*100 ,2) ."%";
                    echo str_replace(",","",$ciblAff);
            ?>
</span>

在此处输入代码

这是css部分：

  <style type="text/css">
 .bar-step {
  position:absolute;
  margin-top:-100px;
  z-index:1;}
.ruler {
position: relative;
width: 100%;
margin: 0px;
height: 24px;
}
.ruler .cm,
.ruler .mm {
position: absolute;
border-left: 1px solid #555;
height: 24px;
width: 10%;
}
.ruler .cm:after {
position: absolute;
bottom: -25px;
font: 17px/0.1 sans-serif;
}
.ruler .mm {
height: 15px;
}
.ruler .mm:nth-of-type(5) {
height: 20px;
}
.ruler .cm:nth-of-type(1) {
left: 0%;
}
.ruler .cm:nth-of-type(1):after {
content: "0";
left: -10%;
}
.ruler .cm:nth-of-type(2) {
left: 10%;
}
.ruler .cm:nth-of-type(2):after {
content: "<?php echo $obj*0.1;  ?>";
left: -35%;
}
.ruler .cm:nth-of-type(3) {
left: 20%;
}
.ruler .cm:nth-of-type(3):after {
content: "<?php echo $obj*0.2;  ?>"; left: -25%;
}
.ruler .cm:nth-of-type(4) {
left: 30%;
}
.ruler .cm:nth-of-type(4):after {
content: "<?php echo $obj*0.3;  ?>"; left: -25%;
}
.ruler .cm:nth-of-type(5) {
left: 40%;
}
.ruler .cm:nth-of-type(5):after {
content: "<?php echo $obj*0.4;  ?>"; left: -25%;
}
.ruler .cm:nth-of-type(6) {
left: 50%;
}
.ruler .cm:nth-of-type(6):after {
content: "<?php echo $obj*0.5;  ?>"; left: -25%;
}
.ruler .cm:nth-of-type(7) {
left: 60%;
}
.ruler .cm:nth-of-type(7):after {
content: "<?php echo $obj*0.6;  ?>";left: -25%;
}
.ruler .cm:nth-of-type(8) {
left: 70%;
}
.ruler .cm:nth-of-type(8):after {
content: "<?php echo $obj*0.7;  ?>";left: -25%;
}
.ruler .cm:nth-of-type(9) {
left: 80%;
}
.ruler .cm:nth-of-type(9):after {
content: "<?php echo $obj*0.8;  ?>";left: -25%;
}
.ruler .cm:nth-of-type(10) {
left: 90%;
}
.ruler .cm:nth-of-type(10):after {
content: "<?php echo $obj*0.9;  ?>";left: -25%;
}
.ruler .cm:nth-of-type(11) {
left: 100%;
}
.ruler .cm:nth-of-type(11):after {
content: "<?php echo $obj;  ?>";left: -25%;
}
.ruler .mm:nth-of-type(1) {
left: 10%;
}
.ruler .mm:nth-of-type(2) {
left: 20%;
}
.ruler .mm:nth-of-type(3) {
left: 30%;
}
.ruler .mm:nth-of-type(4) {
left: 40%;
}
.ruler .mm:nth-of-type(5) {
left: 50%;
}
.ruler .mm:nth-of-type(6) {
left: 60%;
}
.ruler .mm:nth-of-type(7) {
left: 70%;
}
.ruler .mm:nth-of-type(8) {
left: 80%;
}
.ruler .mm:nth-of-type(9) {
left: 90%;
}
.ruler .mm:nth-of-type(10) {
left: 100%;
}
</style> 

.吧台{
位置：绝对位置；
利润上限：-100px；
z-索引：1；}
.尺子{
位置：相对位置；
宽度：100%；
边际：0px；
高度：24px；
}
.尺子.cm，
.尺子.嗯{
位置：绝对位置；
左边框：1px实心#555；
高度：24px；
宽度：10%；
}
.尺子.厘米：之后{
位置：绝对位置；
底部：-25px；
字体：17px/0.1无衬线；
}
.尺子.嗯{
高度：15px；
}
.mm：第n个类型（5）{
高度：20px；
}
.cm：第n个类型（1）{
左：0%；
}
.cm:n个类型（1）：之后{
内容：“0”；
左-10%；
}
.cm：第n个类型（2）{
左：10%；
}
.标尺.cm:n第（2）种类型：之后{
内容：“；
左-35%；
}
.cm：第n个类型（3）{
左：20%；
}
.标尺.cm:n第（3）种类型：之后{
内容：；左侧：-25%；
}
.cm：第n个类型（4）{
左：30%；
}
.尺子.cm:n个类型（4）：之后{
内容：；左侧：-25%；
}
.cm：第n个类型（5）{
左：40%；
}
.标尺.cm:n个类型（5）：之后{
内容：；左侧：-25%；
}
.cm：第n个类型（6）{
左：50%；
}
.cm：第n个类型（6）：之后{
内容：；左侧：-25%；
}
.cm：第n个类型（7）{
左：60%；
}
.标尺.cm:n第（7）种类型：之后{
内容：；左侧：-25%；
}
.cm：第n个类型（8）{
左：70%；
}
.标尺.cm:n第（8）种类型：之后{
内容：；左侧：-25%；
}
.cm：第n个类型（9）{
左：80%；
}
.标尺.cm:n第（9）种类型：之后{
内容：；左侧：-25%；
}
.cm：第n个类型（10）{
左：90%；
}
.cm：第n个类型（10）：之后{
内容：；左侧：-25%；
}
.cm：第n个类型（11）{
左：100%；
}
.尺子.cm:n个类型（11）：之后{
内容：；左侧：-25%；
}
.mm：第n个类型（1）{
左：10%；
}
.mm：第n个类型（2）{
左：20%；
}
.mm：第n个类型（3）{
左：30%；
}
.mm：第n个类型（4）{
左：40%；
}
.mm：第n个类型（5）{
左：50%；
}
.mm：第n个类型（6）{
左：60%；
}
.mm：第n个类型（7）{
左：70%；
}
.mm：第n个类型（8）{
左：80%；
}
.mm：第n个类型（9）{
左：90%；
}
.mm：第n个类型（10）{
左：100%；
}

这是我重新定位图标的位置：

<script>
document.getElementById("pointerRealise").style.width = <?php echo json_encode(number_format($realEnPrct*100 ,2) ."%"); ?>;
document.getElementById("pointerCible").style.left = <?php echo json_encode(number_format($cibEnPRct*100 ,2) ."%"); ?>;
</script>

document.getElementById（“pointerRealise”）.style.width=；
document.getElementById（“pointerCible”）.style.left=；