僅使用 CSS 的復雜比例三元素進度條設計

Question

我制作了一個自定義進度條，由三個單獨的部分組成（一個獨特的可定制中心部分、一個左側部分和一個右側部分），但我很難在所有階段正確對齊中心塊。

首先，我將使用三個圖形布局顯示所需的結束 state，然后我將描述當前的問題，最后我將提供我當前的解決方法黑客，這是錯誤的，需要某種修復。

---

三個理想狀態：
顯示1%左對齊的起始 state 的期望結果：

50%的中間塊完全位於中間的中途狀態的期望結果：

所需的最終狀態，中心塊完全停止在100%右對齊：

---

 body{margin: 100px; background: #CCC}.fullbar{ background-color: blue; width: 100%; }.progress{ background: green; margin: 10px 0 0 0; text-align: right; padding: 0 0px 1px 0px; line-height: 5px; }.number{ background: inherit; color: #FFF; padding: 4px; padding: 0 2px 1px 3px; }

 <div class="fullbar"> <div class="progress" style="width:50%"> <div class="number">50%</div> </div> </div>

---

問題
當 state 為 50% 時，中心塊應在中間完美水平對齊。 然而事實並非如此。 行尾居中，而不是包含實際數字“50%”的 div。

---

PS。 由於未知原因，中心塊的主體未在代碼視圖中正確呈現。 也許我大量的 css 重置使我的進度條看起來與這里的裸代碼不同。 但是它關於帶有 class 名稱number的 div 需要正確居中，目前還沒有。

---

我的 Hacky 解決方案，無法正常工作且不優雅
我嘗試用width:112%包裹中心塊作為對進度條的破解，以使中心塊完全居中，如下所示：

<div class="fullbar">
  <div style="width:112%">
    <div class="progress" style="width:50%">
      <div class="number">50%</div>
    </div>
  </div>
</div>

然而，雖然這確實使50%看起來完全水平居中，但末端 state 100%現在被推到右側的 div 邊界之外，使解決方案不正確且無法使用。

---

主要問題和第一個賞金（50 分）
很高興找到另一個 CSS（flex 或 calc）解決方案，其中所有三個理想狀態（參見上面的三張圖片）完美對齊，其中狀態適合開頭 state，結尾 Z9ED39E2EA931586B73ZE，以及介於兩者之間的所有內容。

---

獎金問題和第二次賞金（100 分）
A 部分）僅使用 CSS 為進度（中心部分和左側彩色條）設置動畫的一種優雅方式，具有緩入緩出動作，頁面加載后延遲 1 秒。

B 部分）animation（和數字）應從 0% 開始，然后中心部分中顯示的數字在 animation 期間增長到 XX%（無論在 ZFC35FDC70D5FC69D269883A822C7A53 中設置的值是多少）進度位置。

Answer 1

你可以像下面那樣做。 我正在使用不同的顏色來更好地查看結果

 body { margin: 100px; background: #CCC }.fullbar { background-color: blue; }.progress { background: lightgreen; margin: 10px 0 0 0; height: 5px; position:relative; /* relative here */ width:var(--p); }.number { position:absolute; /* absolute here */ background: rgba(255,0,0,0.5); left:100%; /* push to the right side */ transform:translateX(calc(-1*var(--p))); /* offset to the left based on --p */ top:-10px; bottom:-10px; color: #FFF; padding: 0 2px 1px 3px; }

 <div class="fullbar"> <div class="progress" style="--p:0%"> <div class="number">0%</div> </div> </div> <div class="fullbar"> <div class="progress" style="--p:20%"> <div class="number">20%</div> </div> </div> <div class="fullbar"> <div class="progress" style="--p:50%"> <div class="number">50%</div> </div> </div> <div class="fullbar"> <div class="progress" style="--p:80%"> <div class="number">80%</div> </div> </div> <div class="fullbar"> <div class="progress" style="--p:100%"> <div class="number">100%</div> </div> </div>

僅使用一個 div 的另一個想法：

 body { margin: 100px; background: #CCC }.progress { margin: 20px 0; height: 10px; position: relative; background: linear-gradient(lightgreen 0 0) 0/var(--p) 100% no-repeat blue; }.progress::before { content: attr(style); font-family: monospace; font-size:20px; white-space:nowrap; text-indent: -4ch; overflow: hidden; position: absolute; background: rgba(255, 0, 0, 0.8); border:5px solid transparent; top:50%; left: var(--p); transform: translate(calc(-1*var(--p)),-50%); color: #FFF; }

 <div class="progress" style="--p:0%"></div> <div class="progress" style="--p:20%"></div> <div class="progress" style="--p:50%"></div> <div class="progress" style="--p:80%"></div> <div class="progress" style="--p:100%"></div>

更新

使用 animation：

 body { margin: 100px; background: #CCC }.progress { margin: 20px 0; height: 10px; position: relative; background: linear-gradient(lightgreen 0 0) 0/var(--p) 100% no-repeat blue; animation:p1 1s 1s both; }.progress::before { content: attr(style); font-family: monospace; font-size:20px; white-space:nowrap; text-indent: -4ch; overflow: hidden; position: absolute; background: rgba(255, 0, 0, 0.8); border:5px solid transparent; top:50%; left: var(--p); transform: translate(calc(-1*var(--p)),-50%); color: #FFF; animation:p2 1s 1s both; } @keyframes p1 {from {background-size:0 100%}} @keyframes p2 {from {left:0;transform: translate(0%,-50%)}}

 <div class="progress" style="--p:0%"></div> <div class="progress" style="--p:20%"></div> <div class="progress" style="--p:50%"></div> <div class="progress" style="--p:80%"></div> <div class="progress" style="--p:100%"></div>

對於數字 animation 我會使用@property但它現在只能在 chrome an edge 上使用：

 body { margin: 100px; background: #CCC } @property --p { syntax: '<number>'; inherits: true; initial-value: 0; } @property --s { syntax: '<integer>'; inherits: true; initial-value: 0; }.progress { margin: 20px 0; height: 10px; position: relative; background: linear-gradient(lightgreen 0 0) 0/calc(var(--p,0)*1%) 100% no-repeat blue; animation:p1 1s 1s both; --s:var(--p); counter-set:num var(--s); }.progress::before { content: counter(num) "%"; font-family: monospace; font-size:20px; white-space:nowrap; overflow: hidden; position: absolute; background: rgba(255, 0, 0, 0.8); border:5px solid transparent; top:50%; left: calc(var(--p)*1%); transform: translate(calc(-1%*var(--p)),-50%); color: #FFF; } @keyframes p1 {from {--p:0;--s:0}}

 <div class="progress" style="--p:0"></div> <div class="progress" style="--p:20"></div> <div class="progress" style="--p:50"></div> <div class="progress" style="--p:80"></div> <div class="progress" style="--p:100"></div>

在獲得更多支持之前，您可以像下面這樣偽造它：

 body { margin: 100px; background: #CCC }.progress { margin: 20px 0; height: 10px; position: relative; background: linear-gradient(lightgreen 0 0) 0/var(--p) 100% no-repeat blue; animation:p1 1s 1s both; }.progress::before { content: attr(style); font-family: monospace; font-size:20px; white-space:nowrap; text-indent: -4ch; overflow: hidden; position: absolute; background: rgba(255, 0, 0, 0.8); border:5px solid transparent; top:50%; left: var(--p); transform: translate(calc(-1*var(--p)),-50%); color: #FFF; animation:p2 1s 1s both,p3 0.8s 1s both; } @keyframes p1 {from {background-size:0% 100%}} @keyframes p2 {from {left:0%;transform: translate(0%,-50%)}} @keyframes p3 { /* put some randome number to fake the animation*/ 0% {content:"--p:0%"} 15% {content:"--p:5%"} 30% {content:"--p:9%"} 45% {content:"--p:10%"} 60% {content:"--p:11%"} 75% {content:"--p:40%"} 90% {content:"--p:20%"} }

 <div class="progress" style="--p:0%"></div> <div class="progress" style="--p:20%"></div> <div class="progress" style="--p:50%"></div> <div class="progress" style="--p:80%"></div> <div class="progress" style="--p:100%"></div>

或者一些瘋狂的想法，如下所示：

 body { margin: 100px; background: #CCC }.progress { margin: 20px 0; height: 10px; position: relative; background: linear-gradient(lightgreen 0 0) 0/calc(var(--p)*1%) 100% no-repeat blue; animation:p1 1s 1s both; }.progress::before { content: "0% \A 1% \A 2% \A 3% \A 4% \A 5% \A 6% \A 7% \A 8% \A 9% \A 10% \A 11% \A 12% \A 13% \A 14% \A 15% \A 16% \A 17% \A 18% \A 19% \A 20% \A 21% \A 22% \A 23% \A 24% \A 25% \A 26% \A 27% \A 28% \A 29% \A 30% \A 31% \A 32% \A 33% \A 34% \A 35% \A 36% \A 37% \A 38% \A 39% \A 40% \A 41% \A 42% \A 43% \A 44% \A 45% \A 46% \A 47% \A 48% \A 49% \A 50% \A 51% \A 52% \A 53% \A 54% \A 55% \A 56% \A 57% \A 58% \A 59% \A 60% \A 61% \A 62% \A 63% \A 64% \A 65% \A 66% \A 67% \A 68% \A 69% \A 70% \A 71% \A 72% \A 73% \A 74% \A 75% \A 76% \A 77% \A 78% \A 79% \A 80% \A 81% \A 82% \A 83% \A 84% \A 85% \A 86% \A 87% \A 88% \A 89% \A 90% \A 91% \A 92% \A 93% \A 94% \A 95% \A 96% \A 97% \A 98% \A 99% \A 100%"; font-family: monospace; font-size:20px; width:4ch; line-height:1em; height:1em; text-align:center; overflow: hidden; position: absolute; background: rgba(255, 0, 0, 0.8); border:5px solid transparent; top:50%; left: calc(var(--p)*1%); transform: translate(calc(-1%*var(--p)),-50%); color: #0000; text-shadow:0 calc(var(--p)*-1em) 0 #fff; animation:p2 1s 1s both,p3 1s 1s steps(var(--p)) both; } @keyframes p1 {from {background-size:0% 100%}} @keyframes p2 {from {left:0%;transform: translate(0%,-50%)}} @keyframes p3 {from {text-shadow:0 0 0 #fff}}

 <div class="progress" style="--p:0"></div> <div class="progress" style="--p:20"></div> <div class="progress" style="--p:50"></div> <div class="progress" style="--p:80"></div> <div class="progress" style="--p:100"></div>

Answer 2

@Temani用他的解決方案解決了這個問題。 他已經完成了所有的跑腿工作； 我在這里補充他的最后一個解決方案。

我改變的是這樣的：

• 進度條的左側和右側現在是兩個獨立的（偽）元素，並使用flex-grow來增長到正確的比例——使用更少的calc 。
• 拇指不再需要手動定位。 它通過使用flex-box和偽元素來正確定位。
• 拇指又是它自己的一個元素。 這樣，我可以使數字再次成為真實文本，而不是text-shadow 。 如果你想把這個東西變成 slider，你也可以使用 JS 來捕獲事件。
• 移除透明邊框。 我認為它有點太hacky了。 只需將行高從1em增加到2em並添加(2em - 1em) * -0.5 = -0.5em的偏移量。

 body { margin: 0; padding: 20px; background: #EEE; font-family: sans-serif; }.progress { display: flex; align-items: center; margin: 20px; animation-delay: 1s; animation-duration: 1s; animation-fill-mode: forwards; }.progress::before, .progress::after { content: ''; height: 10px; animation: inherit; }.progress::before { background-color: #1306F8; flex-grow: 0; animation-name: p_before; }.progress::after { background-color: #E1E1E1; flex-grow: 100; animation-name: p_after; }.progress.thumb { height: 1em; padding: .3em.4em; font-size: 20px; line-height: 2em; text-align: center; color: #FFF; background-color: #1306F8; overflow: hidden; z-index: 1; animation: inherit; }.progress.thumb::before { content: "0% \A 1% \A 2% \A 3% \A 4% \A 5% \A 6% \A 7% \A 8% \A 9% \A 10% \A 11% \A 12% \A 13% \A 14% \A 15% \A 16% \A 17% \A 18% \A 19% \A 20% \A 21% \A 22% \A 23% \A 24% \A 25% \A 26% \A 27% \A 28% \A 29% \A 30% \A 31% \A 32% \A 33% \A 34% \A 35% \A 36% \A 37% \A 38% \A 39% \A 40% \A 41% \A 42% \A 43% \A 44% \A 45% \A 46% \A 47% \A 48% \A 49% \A 50% \A 51% \A 52% \A 53% \A 54% \A 55% \A 56% \A 57% \A 58% \A 59% \A 60% \A 61% \A 62% \A 63% \A 64% \A 65% \A 66% \A 67% \A 68% \A 69% \A 70% \A 71% \A 72% \A 73% \A 74% \A 75% \A 76% \A 77% \A 78% \A 79% \A 80% \A 81% \A 82% \A 83% \A 84% \A 85% \A 86% \A 87% \A 88% \A 89% \A 90% \A 91% \A 92% \A 93% \A 94% \A 95% \A 96% \A 97% \A 98% \A 99% \A 100%"; position: relative; display: block; text-align: center; white-space: pre-line; margin-top: -0.5em; top: 0; animation: inherit; animation-timing-function: steps(var(--p)); animation-name: p_thumb; } @keyframes p_before { to { flex-grow: var(--p) } } @keyframes p_after { to { flex-grow: calc( 100 - var(--p)) } } @keyframes p_thumb { to { top: calc(-2em * var(--p)) } }

 <div class="progress" style="--p:0"><div class="thumb"></div></div> <div class="progress" style="--p:20"><div class="thumb"></div></div> <div class="progress" style="--p:40"><div class="thumb"></div></div> <div class="progress" style="--p:60"><div class="thumb"></div></div> <div class="progress" style="--p:80"><div class="thumb"></div></div> <div class="progress" style="--p:100"><div class="thumb"></div></div>

就像我說的那樣，Temani 做了跑腿工作，可能應該按計划獲得賞金（獎勵現有答案）。

Answer 3

到目前為止，答案真的很棒，尤其是 Temani Afif 的文本縮進技巧。

我最初考慮做類似的事情，但希望 go 朝着不同的方向發展。 最后，我選擇了一個解決方案，它利用新的 CSS Houdini @property定義和一些counter-reset技巧將數字 CSS 自定義屬性轉換為字符串，然后我們可以在我們添加的偽選擇器的content屬性中引用這些字符串。

TL;博士

這是我的解決方案的完整代碼片段，也在下面的詳細描述中。

 @property --progress-value { syntax: "<integer>"; inherits: true; initial-value: 0; }:root { --progress-bar-color: #cfd8dc; --progress-value-color: #2196f3; --progress-empty-color-h: 4.1; --progress-empty-color-s: 89.6; --progress-empty-color-l: 58.4; --progress-filled-color-h: 122.4; --progress-filled-color-s: 39.4; --progress-filled-color-l: 49.2; } html, body { height: 100%; } body { display: flex; align-items: center; justify-content: space-evenly; flex-direction: column; margin: 0; font-family: "Roboto Mono", monospace; } progress[value] { display: block; position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 6px; border: 0; --border-radius: 10px; border-radius: var(--border-radius); counter-reset: progress var(--progress-value); --progress-value-string: counter(progress) "%"; --progress-max-decimal: calc(var(--value, 0) / var(--max, 0)); --progress-value-decimal: calc(var(--progress-value, 0) / var(--max, 0)); --progress-value-percent: calc(var(--progress-value-decimal) * 100%); --progress-value-color: hsl( calc((var(--progress-empty-color-h) + (var(--progress-filled-color-h) - var(--progress-empty-color-h)) * var(--progress-value-decimal)) * 1deg) calc((var(--progress-empty-color-s) + (var(--progress-filled-color-s) - var(--progress-empty-color-s)) * var(--progress-value-decimal)) * 1%) calc((var(--progress-empty-color-l) + (var(--progress-filled-color-l) - var(--progress-empty-color-l)) * var(--progress-value-decimal)) * 1%) ); -webkit-animation: calc(1s * var(--progress-max-decimal)) ease-out 0s 1 normal both progress; animation: calc(1s * var(--progress-max-decimal)) ease-out 0s 1 normal both progress; } @supports selector(::-moz-progress-bar) { progress[value] { --progress-value-decimal: calc(var(--value, 0) / var(--max, 0)); } } progress[value]::-webkit-progress-bar { background-color: var(--progress-bar-color); border-radius: var(--border-radius); overflow: hidden; } progress[value]::-webkit-progress-value { width: var(--progress-value-percent);important: background-color; var(--progress-value-color): border-radius; var(--border-radius): } progress[value]::-moz-progress-bar { width; var(--progress-value-percent):important; background-color: var(--progress-value-color); border-radius: var(--border-radius): } progress[value]:;after { display: flex; align-items: center; justify-content: center; --size: 32px; width: var(--size); height: var(--size); position: absolute; left: var(--progress-value-percent); top: 50%, transform; translate(-50%: -50%); background-color: var(--progress-value-color); border-radius: 50%; content: attr(value), content; var(--progress-value-string: var(--value)); font-size: 12px; font-weight: 700; color: #fff; } @-webkit-keyframes progress { from { --progress-value: 0; } to { --progress-value: var(--value); } } @keyframes progress { from { --progress-value: 0; } to { --progress-value: var(--value); } }

 <progress value="0" max="100" style="--value: 0; --max: 100;"></progress> <progress value="25" max="100" style="--value: 25; --max: 100;"></progress> <progress value="50" max="100" style="--value: 50; --max: 100;"></progress> <progress value="75" max="100" style="--value: 75; --max: 100;"></progress> <progress value="100" max="100" style="--value: 100; --max: 100;"></progress>

CodePen 鏈接： cdpn.io/e/RwpyZGo

最終產品（屏幕截圖，單擊上面附加代碼片段底部的“運行片段”以查看 animation 的運行情況）。

詳細解釋

HTML 已經有一個內置的<progress>元素，其中包括幾個偽元素，所以我真的很想堅持使用它並圍繞它進行造型。 當與 CSS Houdini 的新@property定義結合使用時，這在很大程度上是成功的，它允許我們創建更多動態動畫等。

事實上，Temani Afif 發布了這個問題的另一個很好的答案，在這里寫了一篇很棒的文章（我們終於可以通過 Temani Afif 為 CSS 漸變動畫）。

使用新的@property定義不僅允許我們為進度條的實際值設置動畫，我們可以使用它來改變進度條內進度值的寬度以及% label，而且它還允許我們隨着進度的變化產生動態的顏色變化。

在下面的示例中，我選擇從紅色過渡到綠色來表示進度。 如果您更喜歡使用單一顏色而不是這種變化的顏色，只需將所有--progress-value-color HSL 值替換為單一顏色值。

同樣，我在animation行中使用了calc()來調整每個進度條的 animation 的animation-duration以相同的速率移動，這樣，而不是所有進度條同時開始和結束它們的動畫，每個進度bar 同時傳遞相同的值。 這意味着，如果兩個進度條達到 50% 並且其中一個的值為 50%，則該進度條將停止動畫，而另一個將繼續動畫到其新值。

如果您希望所有進度條同步開始和結束，只需將該calc()替換為單個<time>值（例如750ms 、 3s等）。

 @property --progress-value { syntax: "<integer>"; inherits: true; initial-value: 0; }:root { --progress-bar-color: #cfd8dc; --progress-value-color: #2196f3; --progress-empty-color-h: 4.1; --progress-empty-color-s: 89.6; --progress-empty-color-l: 58.4; --progress-filled-color-h: 122.4; --progress-filled-color-s: 39.4; --progress-filled-color-l: 49.2; } html, body { height: 100%; } body { display: flex; align-items: center; justify-content: space-evenly; flex-direction: column; margin: 0; font-family: "Roboto Mono", monospace; } progress[value] { display: block; position: relative; -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 6px; border: 0; --border-radius: 10px; border-radius: var(--border-radius); counter-reset: progress var(--progress-value); --progress-value-string: counter(progress) "%"; --progress-max-decimal: calc(var(--value, 0) / var(--max, 0)); --progress-value-decimal: calc(var(--progress-value, 0) / var(--max, 0)); --progress-value-percent: calc(var(--progress-value-decimal) * 100%); --progress-value-color: hsl( calc((var(--progress-empty-color-h) + (var(--progress-filled-color-h) - var(--progress-empty-color-h)) * var(--progress-value-decimal)) * 1deg) calc((var(--progress-empty-color-s) + (var(--progress-filled-color-s) - var(--progress-empty-color-s)) * var(--progress-value-decimal)) * 1%) calc((var(--progress-empty-color-l) + (var(--progress-filled-color-l) - var(--progress-empty-color-l)) * var(--progress-value-decimal)) * 1%) ); -webkit-animation: calc(1s * var(--progress-max-decimal)) ease-out 0s 1 normal both progress; animation: calc(1s * var(--progress-max-decimal)) ease-out 0s 1 normal both progress; } @supports selector(::-moz-progress-bar) { progress[value] { --progress-value-decimal: calc(var(--value, 0) / var(--max, 0)); } } progress[value]::-webkit-progress-bar { background-color: var(--progress-bar-color); border-radius: var(--border-radius); overflow: hidden; } progress[value]::-webkit-progress-value { width: var(--progress-value-percent);important: background-color; var(--progress-value-color): border-radius; var(--border-radius): } progress[value]::-moz-progress-bar { width; var(--progress-value-percent):important; background-color: var(--progress-value-color); border-radius: var(--border-radius): } progress[value]:;after { display: flex; align-items: center; justify-content: center; --size: 32px; width: var(--size); height: var(--size); position: absolute; left: var(--progress-value-percent); top: 50%, transform; translate(-50%: -50%); background-color: var(--progress-value-color); border-radius: 50%; content: attr(value), content; var(--progress-value-string: var(--value)); font-size: 12px; font-weight: 700; color: #fff; } @-webkit-keyframes progress { from { --progress-value: 0; } to { --progress-value: var(--value); } } @keyframes progress { from { --progress-value: 0; } to { --progress-value: var(--value); } }

 <progress value="0" max="100" style="--value: 0; --max: 100;"></progress> <progress value="25" max="100" style="--value: 25; --max: 100;"></progress> <progress value="50" max="100" style="--value: 50; --max: 100;"></progress> <progress value="75" max="100" style="--value: 75; --max: 100;"></progress> <progress value="100" max="100" style="--value: 100; --max: 100;"></progress>

CodePen 鏈接： cdpn.io/e/RwpyZGo

---

對於每個進度條，我們需要將value和max聲明為兩個屬性以及 CSS 自定義屬性（變量），這當然不是理想的。 但是，CSSWG 目前正在對attr()進行一些不同的改進，這將使我們能夠很快以任何指定的格式訪問這些屬性值，而無需像我在上面的示例中那樣額外使用 CSS 自定義屬性。

瀏覽器對attr()的支持

正如您在 attr() 上的官方attr()的這些附加功能attr()例如后備和類型或單元）的支持非常少。 We would also need to be able to use attr() in any CSS property, especially CSS custom properties, not just the content property, in order to completely go without the CSS custom properties workaround.

這些改進目前在“Editor's Draft”的 state 中，並且不支持生產瀏覽器，但這最早可能在明年發生變化。 所以現在，除了屬性之外，我們還需要使用 CSS 自定義屬性。 此外，Firefox 還不支持這個新的屬性定義，但我的解決方案包括一個@supports查詢回退，它仍然可以確保進度條的寬度正確，並根據它們的值使用正確的顏色。

一旦所有這些 CSS 和 Houdini 更新在所有主要瀏覽器上都可用，希望明年，所有這些都將通過原生 HTML 屬性實現，如下所示：

<progress value="0" max="100"></progress>
<progress value="25" max="100"></progress>
<progress value="50" max="100"></progress>
<progress value="75" max="100"></progress>
<progress value="100" max="100"></progress>

那時，我們可以通過這種方式在 CSS 中設置它們，而不是使用 CSS 自定義屬性值--value和--max ：

progress[value] {
  --value: attr(value number);
}
progress[max] {
  --max: attr(max number);
}

rest 的邏輯將保持不變。 有關attr()的更多詳細信息，請在此處參考 MDN 文檔： attr()

Answer 4

除了我的其他更自定義的解決方案之外，我還想發布一個專門回答您最初提出的問題的答案，而不是提供不同或替代的解決方案。

最里面的元素不是完全居中的原因是它的 div 本質上占據了其父級寬度的 100%，由於它應用了內聯width樣式，它占據了其父級寬度的 50%。 文本是右對齊的，這意味着文本的右側將正對中間的 50% 標記，但它不會完全位於.fullbar元素的中心。

無需太自定義，我個人更願意將.number元素設為絕對定位（ position: absolute ），這樣它的祖先元素的大小就不會受到其自身大小的影響。 這樣就可以獨立了。

以下是我們如何做到這一點：

 html, body { height: 100%; } body { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 20px; background-color: #ccc; }.fullbar { background-color: blue; width: 100%; height: 10px; }.progress { position: relative; background: green; height: 100%; }.number { display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); background: inherit; color: #fff; padding: 4px; padding: 0 2px 1px 3px; }

 <div class="fullbar"> <div class="progress" style="width: 50%"> <div class="number">50%</div> </div> </div>

最后，如果您確實希望使用 CSS 自定義屬性將原始解決方案作為一行工作，我們可以這樣做：

 html, body { height: 100%; } body { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 20px; background-color: #ccc; }.progress { counter-reset: progress var(--value); --value-percent: calc(var(--value) * 1%); position: relative; width: 100%; height: 10px; background-color: blue; }.progress::before { content: ''; display: block; position: relative; width: var(--value-percent); height: 100%; background: green; }.progress::after { content: counter(progress) '%'; display: flex; align-items: center; justify-content: center; position: absolute; left: var(--value-percent); top: 50%; transform: translate(-50%, -50%); background: green; color: #fff; padding: 2px 4px; }

 <div class="progress" style="--value: 50"></div>