CSS：当浏览器窗口大小更改时，如何动态更改伪元素的宽度？

Question

我已经建立了一个进度条，使我的客户可以看到进度。当您签出我的代码时，您会发现我已经以这种方式构建代码，可以将width元素中的li::after设置为0-100％，这将定义每个步骤的进度。

现在，我遇到的问题是，当我最小化窗口时，第一个::after的{​​{1}}元素会破坏li，这是不好的。它应最小化并仅填充每个元素之间可用空间的宽度。

---

例如，当第一步完成next li时，40 %应该将宽度更改为::after：

当宽度get更改为40 %时，绿色的60 %元素就可以进行下一步操作。现在，在将::after设置为第一个40 %元素的情况下最小化窗口时，其宽度不会随着新的窗口大小而改变，并且会破坏下一个要避免的元素。这是我的问题。

---

我已经做了很多尝试，但是我不明白。那么我该如何解决这个问题呢？

::after

.progress-container {
    position: relative;
}

.progress-container::before {
    background-color: #dadada;
    width: 80%;
    height: 11px;
    position: absolute;
    left: 10%;
    right: 10%;
    top: 53px;
    content: '';
}

.progress-bar {
    list-style: none;
    margin: 0;
    padding: 0 !important;
    display: flex;
    display: -ms-flexbox;
    justify-content: space-between;
    width: 100%;
    color: #666666;
    font-size: 2em;
}

.progress-bar h3 {
    font-size: 18px;
    letter-spacing: 2px;
}

.progress-bar li {
    position: relative;
    display: inline-block;
    text-align: center;
    font-size: 0.6em;
    padding-right: 1em;
}

.progress-bar li::before {
    content: attr(data-step);
    display: block;
    background: #666666;
    color: #ffffff;
    width: 7em;
    height: 7em;
    text-align: center;
    margin: 0 auto 20px;
    line-height: 7em;
    border-radius: 100%;
    position: relative;
    z-index: 1000;
}

.progress-bar li::after {
    content: '';
    position: absolute;
    display: block;
    height: 11px;
    top: 53px;
    left: 50%;
    margin-left: 2.9em;
    z-index: 2;
}

.progress-bar li.progress-1.is-active::before,
.progress-bar li.progress-1.is-active::after {
    background: green;
}

.progress-bar li.progress-1::after {
    width: 40%;
}

.progress-bar li.progress-2.is-active::before,
.progress-bar li.progress-2.is-active::after {
    background: yellow;
}

.progress-bar li.progress-3.is-active::before,
.progress-bar li.progress-3.is-active::after {
    background: orange;
}

.progress-bar li.progress-4.is-active::before {
    background: red;
}

.progress__last {
    padding-right: 0;
}

.progress__last:after {
    display: none !important;
}

Answer 1

我将简化以下代码，并使用一些背景技巧。想法是在主要元素上使用背景色定义百分比。

我也使用CSS变量来简化操作。

.progress-container {
    margin:5px;
}

.progress-bar {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    color: #666666;    
    background:
      /*The gradient that will hide the main one based on the percentage*/
      linear-gradient(#dadada,#dadada) 100% 30px/ calc(100% - var(--p,100%)) 10px,
      /*the main gradient with 3 colors*/
      linear-gradient(to right,
        green  0             ,green  calc(100%/3),   
        yellow calc(100%/3)  ,yellow calc(2*100%/3), 
        orange calc(2*100%/3),orange calc(3*100%/3))
      0 30px/100% 10px;
    background-repeat:no-repeat;
    position:relative;
    z-index:0;
}
.progress-bar h3 {
    font-size: 18px;
    letter-spacing: 2px;
}
.progress-bar li {
    display: inline-block;
    text-align: center;
    font-size: 1em;
    padding-right: 1em;
}
.progress-bar li:first-child {
  margin-left:-5px;
}
.progress-bar li:last-child {
  padding-right:0;
  margin-right:-5px;
}

.progress-bar li::before {
    content: attr(data-step);
    display: block;
    background: #666666;
    color: #ffffff;
    width: 4em;
    height: 4em;
    text-align: center;
    line-height: 4em;
    border-radius: 50%;

}

.progress-bar li.progress-1.is-active::before {
  background:green;
}

.progress-bar li.progress-2.is-active::before {
  background: yellow;
}


.progress-bar li.progress-3.is-active::before {
  background: orange;
}


.progress-bar li.progress-4.is-active::before {
    background: red;
}

<div class="progress-container">
    <ol class="progress-bar" style="--p:20%">
        <li class="progress-1 is-active" data-step="1" >
            <h3>1</h3>
        </li>
        <li class="progress-2" data-step="2">
             <h3>2</h3>
        </li>
        <li class="progress-3" data-step="3">
            <h3>3</h3>
        </li>
        <li class="progress-4 progress__last" data-step="4">
            <h3>4</h3>
        </li>
    </ol>
</div>

<div class="progress-container">
    <ol class="progress-bar" style="--p:50%">
        <li class="progress-1 is-active" data-step="1">
            <h3>1</h3>
        </li>
        <li class="progress-2 is-active" data-step="2" >
            <h3>2</h3>
        </li>
        <li class="progress-3" data-step="3">
           <h3>3</h3> 
        </li>
        <li class="progress-4 progress__last" data-step="4">
            <h3>4</h3>
        </li>
    </ol>
</div>
<div class="progress-container">
    <ol class="progress-bar"  style="--p:75%">
        <li class="progress-1 is-active" data-step="1">
            <h3>1</h3>
        </li>
        <li class="progress-2 is-active" data-step="2" >
            <h3>2</h3>
        </li>
        <li class="progress-3 is-active" data-step="3">
            <h3>3</h3>
        </li>
        <li class="progress-4 progress__last" data-step="4">
            <h3>4</h3>
        </li>
    </ol>
</div>
<div class="progress-container">
    <ol class="progress-bar"  style="--p:100%">
        <li class="progress-1 is-active" data-step="1">
            <h3>1</h3>
        </li>
        <li class="progress-2 is-active" data-step="2" >
            <h3>2</h3>
        </li>
        <li class="progress-3 is-active" data-step="3" >
            <h3>3</h3>
        </li>
        <li class="progress-4 progress__last is-active" data-step="4">
            <h3>4</h3>
        </li>
    </ol>
</div>