html - CSS:当浏览器窗口大小发生变化时，如何使伪元素宽度动态变化？

Question

我为自己制作了一个进度条，让我的客户可以看到进度。当您检查我的代码时，您可以看到我构建它的方式可以将 li::after 元素的 width 设置为 0 - 100%，这应该定义每个步骤的进度。

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

---

因此，例如，当第一步是 40 % 完成时，::after 应该将宽度更改为 40 %:

当宽度 get 更改为 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;
}

<div class="progress-container">
    <ol class="progress-bar">
        <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>

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>