增长:在内容从中心开始的宽度之前 [英] 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屋!