Create a line break while maintaining inline status

Sometimes you want to create a line break after an inline element, while retaining that inline element’s inline status. Luckily all it takes is a little pseudo-element magic:

Code language
.inline-element::after {
content: '\A';
white-space: pre;

This is especially useful in <form> contexts, like the following example shows.

Demo permalink