Inline text loading bar using :after element

Question

Im looking to build an inline loading bar, using a span and then layering an :after element with the exact same content but different color / bgcolor above it.

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

This demo is abstract, but it serves its purpose to point out the weird issue: The effect works as expected for the first word, smoothly filling it with the new color, but then stops working and instead jumps the next two words. I added a background-color to showcase that it actually continues as expected. Unlike the text however.

Answer 1

The problem is that the :after wants to wordwrap, and you can't see the rest of the words because overflow is off. (That is, the last two words would have appeared on the next line(s) if the height would have been bigger.)

Solution: prevent wordwrap by adding the property

white-space:nowrap;

See updated fiddle