Add a line break between inline elements
It's a common scenario where we want to split a heading into multiple lines. For example, the heading is displayed continuously on a big screen. But on a small screen, it should breaks into different parts.
Without using the `br`
tag, we can construct the heading from various inline `span`
elements.
<h2>
<span class="primary">Tip, tricks, best practices</span>
<span>of front-end development</span>
</h2>
By using the `::after`
pseudo element, we are able to add a line break after the first inline element:
.primary::after {
content: '\A';
white-space: pre;
}
Where `\A`
represents the line break character.
Demo
Add a line break between inline elements