增长:在内容从中心开始的宽度之前 [英] Grow :before content width from center

问题描述

我最近发现了以下用于文本进行样式设置的方法，并想知道是否存在一种变通方法来使元素的宽度从中心开始增大，因此文本也将从中心开始而不是从左侧开始填充.

I've recently discovered the following approach for text-progress styling and wonder if there is a workaround to grow the element width from the center, so the text would also fill the from center instead of from the left side.

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>

推荐答案

您还可以通过设置 left 和 text-indent

我还更改了您的 p 以显示为内联块，因此它使文本(而不是空白)动起来.

I also changed your p to display as inline-block, so it animate the text and not white space.

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

Thanks to Gaby aka G. Petrioli, it appears Firefox have issue with percent-based text-indent, so I added a CSS hack to overcome that. And again thanks to Gaby, for his now delete answer, that solved the Firefox issue (though unfortunately fails on 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 而不是％.

An alternative to the CSS hack, is a small script, that, on page load, measure the actual width of the element and set the text-indent as px instead of %.

这篇关于增长:在内容从中心开始的宽度之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！