html - 使用 :after element 的内联文本加载栏

Question

我想构建一个内联加载栏，使用 span，然后在 :after 元素上分层，内容完全相同，但在其上方有不同的颜色/背景色。

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;

参见 updated fiddle