add-a-line-break-between-inline-elements.mdx

category	created	tags	title
Tip	2021-03-05	CSS	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.

```html

Tip, tricks, best practices of front-end development

```

.demo__heading {
    font-weight: 500;
    text-align: center;
}
.demo__heading--primary::after {
    content: '\\A';
    white-space: pre;
}