我想构建一个内联加载栏,使用 span,然后在 :after 元素上分层,内容完全相同,但在其上方有不同的颜色/背景色。
HTML
<span id="target" data-text="Lorem Ipsum Dolor">Lorem Ipsum Dolor</span>
CSS
#target {
margin: 25px;
font-size: 22px;
color: #111;
position: relative;
}
#target:after {
content: attr(data-text);
color: orange; background-color: rgba(50,50,50,0.3);
position: absolute;
overflow: hidden;
width: 0;
left: 0;
top: 0;
height: 28px;
transition: width 5s linear;
}
#target.loading:after {
width: 100%;
}
这个演示是抽象的,但它的目的是指出一个奇怪的问题:第一个单词的效果按预期工作,用新颜色平滑地填充它,但随后停止工作,而是跳到下两个单词。我添加了一个背景颜色来展示它实际上按预期继续。然而,与文本不同。
最佳答案
问题是 :after
想要自动换行,而您看不到其余的单词,因为溢出已关闭。 (也就是说,如果高度更大,最后两个词会出现在下一行。)
解决方案:通过添加属性来防止自动换行
white-space:nowrap;
关于html - 使用 :after element 的内联文本加载栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24090407/