Create a line break while maintaining inline status

Categories

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
CSS
.inline-element::after {
  content: '\A';
  white-space: pre;
}

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

Hello, I’m Andy and I’ll help you build fast & visually stunning websites.

I am currently setting up a new creative agency called Set Creative Studio and we are taking on projects for 2022, so if you have a project in mind, get in touch.