css - 成长 :before content width from center

Question

我最近发现了以下文本进度样式的方法，想知道是否有一种变通方法可以从中心增加元素宽度，这样文本也会从中心而不是从左侧填充。

body {
  background-color: black;
}

p {
  color: rgba(255, 255, 255, .4);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  height: 85px;
  position: relative;
}

p:before {
  max-width: 100%;
  width: 0;
  height: 85px;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  content: attr(data-text);
  display: block;
  animation: background-fill 15s ease-in-out infinite forwards;
}
  
@keyframes background-fill {
  0% {
    width: 0;
   }
  100% {
    width: 100%;
  }
}

<p data-text='Text'>Text</p>

Answer 1

您还可以通过设置 left 和 text-indent 的动画来实现这一点

我还更改了您的 p 以显示为内联 block ，因此它为文本而不是空白设置动画。

感谢Gaby aka G. Petrioli ，似乎 Firefox 在基于百分比的 text-indent 方面存在问题，所以我添加了一个 CSS hack 来克服这个问题。再次感谢 Gaby，他现在删除的答案解决了 Firefox 问题(尽管不幸的是在 IE 上失败了)

body {
  background-color: black;
}

p {
  color: rgba(255, 255, 255, .4);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  height: 85px;
  position: relative;
  display: inline-block;
}

p:before {
  max-width: 100%;
  width: 0;
  height: 85px;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  content: attr(data-text);
  display: block;
  animation: background-fill 5s ease-in-out infinite forwards;
}
  
@keyframes background-fill {
  0% {
    left: 50%;
    text-indent: -50%;
    width: 0;
   }
  100% {
    left: 0;
    text-indent: 0;
    width: 100%;
  }
}

/*  Begin - Firefox bug fix  */
@supports (-moz-appearance:meterbar) and (display:flex) {
  p:before {
    width: auto;
    right: 50%;
    left: 50%;
    display: flex;
    justify-content: center;
  }
  @keyframes background-fill {
    0% {
      right: 50%;
      left: 50%;
    }
    100% {
      right: 0;
      left: 0;
    }
  }
}
/*  End - Firefox bug fix  */

<p data-text='Text'>Text</p>

---

CSS hack 的替代方案是一个小脚本，它在页面加载时测量元素的实际宽度并将 text-indent 设置为 px而不是 %。