css - 使用 css 测量 div(如条形图)

Question

假设我有一个 100px 的 div，它一直都是文本。

我如何设置 div 的样式，使其部分由左到右填充颜色，例如红色和 div 的其余部分是另一种颜色？当我说填充时，我指的是背景，所以文本仍然可见。

Answer 1

.gauge {
  position: relative; 
  width:  100px; 
  height: 25px; 
  background: #7785AC;
}

.value {
  position: absolute; 
  top:  0; 
  left: 0; 
  width:  35%; 
  height: 100%; 
  background: #5B2A86; 
  margin:  0; 
  padding: 0; 
  z-index: 0;
}

.text {
  position: absolute; 
  top:  0; 
  left: 0; 
  width:  100%; 
  height: 100%; 
  color: #fff;
  text-align: justify; 
  margin:  0; 
  padding: 0; 
  z-index: 1;
}

<div class="gauge">
  <span class="value"></span>
  <span class="text">yourText</span>
</div>