Let’s say you’ve got a design you’re building, where it’s important that a key phrase be on a new line. In this case, it reads better if ‘two free’ starts the line, and we need to be sure that it will go on a new line regardless of the size of the container it’s in. Furthermore, we want this to be optional - this text will appear in multiple elements of different sizes, but the new line should only happen in the banner variant.
So adding a <br /> before the text won’t work, because we want to be able to reuse the text without the new line.
Text doesn’t normally wrap like that - usually, the second line will be shorter than the first line:
So how do we force a new line to appear in front of an arbitrary element? You might be tempted to do something like:
.banner em:before {
content: '<br />';
}
but unfortunately that doesn’t work - it just renders the plaintext <br />.