html - 进度指示器从进度条外开始

Question

最左边的进度指示器最初是从进度条外开始的，如果我去掉右边，它会回到正确的位置:-10%；但是当我更改 pro-bar 的内联 css 中的宽度时，进度指示器不会移动。 如何解决这个问题。

.progress_bar{
    height: 15px;
    background-color:grey;
    border-radius:15px;
    box-shadow:0 4px 7px -5px #000 inset;
}
.progress_bar:first-child{
    margin: 50px 0;
}
.progress_bar .pro-bar{
    position: relative;
    height: 100%;
    box-shadow: 0 1px 11px -4px #fff inset;
    border-radius:15px;
    animation: animate-positive 4s;
}
.progress_bar .pro-bar > span{
    background: linear-gradient(to top, #3d4131 35%, #fff 233%);
    color: #a5a5a4;
    box-shadow: 1px 1px  3px #1d1a1f;
    font-size: 14px;
    font-weight: 700;
    position: absolute;
    top: -37px;
    right: -10%;
    padding: 4px 10px;
    border-radius: 3px 3px 3px 0px;
}
.progress_bar .pro-bar > span:after{
    content: "";
    border-top: 6px solid #3d4131;
    border-right: 6px solid transparent;
    position: absolute;
    bottom: -6px;
    left:0;
}
.pro-bar {
   background: linear-gradient(to right,#d98164 35%,#a9b487 68%);
}

<div class="row">
<div class="col-xs-9 progress-container">

        <div class="col-md-6">
            <div class="progress_bar">
                <div class="pro-bar" style="width: 0%">
                    <span>0%</span>
                </div>
            </div>
 
        </div>
    </div>
</div>

Answer 1

我想我已经弄明白了，请试试

left: 100%;

代替权:-10%；