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.

Demo


Comments

If you liked this post, you might like these ones, too

  1. Use CSS Clamp to create a more flexible wrapper utility

    A handy way to use modern CSS functions to give yourself fine-grained, yet flexible, design control.

    Continue
  2. Load all focusable elements with JavaScript

    A handy helper function that will load all user-focusable elements inside a parent element for you.

    Continue
  3. Build a fancy hover animation

    Learn how to use the power of CSS to take any collection of images and make them blend well together with a fancy interactive state.

    Continue

Become a supporter by joining the Piccalilli Membership

For $5 per month, you get access to a private, friendly Discord community, a regular newsletter, huge discounts on courses and free access to all premium tutorials.

Most importantly, by becoming a supporter, you help make as much content, free-to-everyone as possible on this site, which benefits everyone. As a member, you also get an ad-free experience around the site.

Support Piccalilli by becoming a member

Sign up for updates

Stay up to date with updates from Piccalilli. You’ll get alerted as soon as any new content gets published. You’ll also get updates on upcoming courses and membership features! You can unsubscribe at any time, too.