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 to level up your front-end development skills.

I'm a designer and front-end developer who has worked in the design and web industries for over 15 years, and in that time, I have worked with some of the largest organisations in the world, like Google, Harley-Davidson, BSkyB, Unilever, The Natural History Museum, Oracle, Capita, Vice Media and the NHS.

On Piccalilli, I share my knowledge and experience to make you a better front-end developer.

I'm the founder of Set Studio, a creative agency that specialises in building stunning websites that work for everyone. Check out what we're all about.