使用:after元素的内联文本加载条

Question

我希望建立一个内联加载条，使用span，然后分层an:after元素与完全相同的内容，但不同的颜色/bgcolor上面。

JSFiddle

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%;
}

这个演示是抽象的，但它的目的是指出一个奇怪的问题:效果如预期的那样在第一个单词中工作，平滑地填充新颜色，但随后停止工作，而是跳到下两个单词。我添加了一个背景色来展示它实际上是按照预期进行的。与文本不同，

Answer 1

问题是:after想要换行，而您无法看到其余的单词，因为溢出是关闭的。(也就是说，如果高度再大一些，最后两个单词就会出现在下一行。)

解决方案:通过添加 属性来防止换行

white-space:nowrap;

参见更新后的fiddle