← #66 Do not use submit to name a submit button

Add a line break between inline elements

Topics: CSS

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.

<span class="primary">Tip, tricks, best practices</span>
<span>of front-end development</span>

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.


Tip, tricks, best practices of front-end development

Fix a typo or suggest an improvement
#68 Log the full object in NodeJS