我怎样才能使这个进度条移动和桌面响应

Question

我有一个包含三个阶段（开始、选择、结果）的进度条。一旦达到一个阶段，进度圈就会变成黑色以表示，尚未达到的阶段是透明的，圆圈有黑色边框。我面临的问题是连接三个进度条圆圈的线没有响应。在某些设备上，这条线没有按应有的方式触及圆圈，而在其他设备上，这条线越过我也不想要的圆圈。我将不胜感激有关使此进度条跨设备响应的任何帮助，谢谢！

https://jsfiddle.net/6p9kmte8/

HTML

<!-- bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="d-flex justify-content-center">
  <div class="progress-container">
    <ul class="progress-steps">
      <li class="active">Begin</li>
      <li class="active">Select</li>
      <li>Results</li>
    </ul>
  </div>
</div>

<!-- jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>

CSS

.progress_bar>div {
    display: inline-block;
}

.progress-container {
    width: 71.3%;
    /*margin-top: 9.39%;*/
    margin-bottom: 1%;
    font-weight: 300;
    margin-right: 2em;
    position: fixed;
    bottom: 0;
}

.progress-steps {
    counter-reset: step;
}

.progress-steps li {
    list-style-type: none;
    width: 33.333333%;
    float: left;
    font-size: 1.2em;
    position: relative;
    text-align: center;
    color: black;
}

.progress-steps li:before {
    width: 2.5em;
    height: 2.5em;
    content: counter(step);
    counter-increment: step;
    line-height: 2.5em;
    border: 2px solid black;
    display: block;
    text-align: center;
    margin: 0 auto .7em auto;
    border-radius: 50%;
    background-color: black;
}

.progress-steps li:after {
    width: 100%;
    height: 0.2em;
    content: '';
    position: absolute;
    background-color: black;
    top: 1.2em;
    left: -50%;
    z-index: -1;
}

.progress-steps li:first-child:after {
    content: none;
}

.progress-steps li.active {
    color: black;
}

.progress-steps li.active:before {
    border-color: black;
}

.progress-steps li.active+li:after {
    background-color: black;
    width: 85%;
    margin-left: 7.5%;
}

.progress-steps li.active+li:before {
    background-color: transparent;
    border: 2px solid black;
    color: transparent;
}

@media (max-width: 1024px) {
    .progress-container {
        width: 90%;
        /*margin-top: 7.15em;
        padding-bottom: 0.4em;*/
        margin-bottom: 2%;
    }

    .progress-steps li {
        font-size: 0.9em;
    }

    .progress-steps li.active+li:after {
        width: 71%;
    }
}

Answer 1

.progress_bar>div {
    display: inline-block;
}

.progress-container {
    width: 71.3%;
    /*margin-top: 9.39%;*/
    margin-bottom: 1%;
    font-weight: 300;
    margin-right: 2em;
    position: fixed;
    bottom: 0;
}

.progress-steps {
    counter-reset: step;
}

.progress-steps li {
    list-style-type: none;
    width: 33.333333%;
    float: left;
    font-size: 1.2em;
    position: relative;
    text-align: center;
    color: black;
}

.progress-steps li:before {
    width: 2.5em;
    height: 2.5em;
    content: counter(step);
    counter-increment: step;
    line-height: 2.5em;
    border: 2px solid black;
    display: block;
    text-align: center;
    margin: 0 auto .7em auto;
    border-radius: 50%;
    background-color: black;
}

.progress-steps li:after {
    width: calc(100% - 2.5em);
    height: 0.2em;
    content: "";
    position: absolute;
    background-color: black;
    top: 1.25em;
    right: calc(50% + 1.25em);
    z-index: -1;
}

.progress-steps li:first-child:after {
    content: none;
}

.progress-steps li.active {
    color: black;
}

.progress-steps li.active:before {
    border-color: black;
}

.progress-steps li.active+li:before {
    background-color: transparent;
    border: 2px solid black;
    color: transparent;
}

@media (max-width: 1024px) {
    .progress-container {
        width: 90%;
        /*margin-top: 7.15em;
        padding-bottom: 0.4em;*/
        margin-bottom: 2%;
    }

    .progress-steps li {
        font-size: 0.9em;
    }
}