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.


Comments

Hello, I’m Andy and I’ll help you build fast, accessible websites & design systems.

I’m a freelance CSS and design systems consultant, based in the UK. I specialise in design systems and creative web design, such as landing pages and campaign work.

I’m currently helping Google by refactoring the CSS and creating a design system for web.dev, but I have availability for projects such as small websites, landing pages and consultancy. I will have full availability for larger projects in January 2022.

Hire me