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. How CSS box sizing works

    Pretty much everything in CSS is a box, so let’s learn how sizing them works.

    Continue
  2. Improve the readability of the content on your website

    Learning how to make long-form content, like blog posts, read well is a valuable and transferable design skill to learn. In this tutorial, we’re looking at how CSS gives us all the tools we need to achieve this, as a compliment to semantic HTML.

    Continue
  3. Create a user controlled dark or light mode

    Automatic dark and light themes, based on system user-preferences, are handy but in this tutorial, we take that one step further and give our users control.

    Continue

Become a supporter by joining the Piccalilli Membership

For as little a $5 per month, you can get access to a private, friendly community, get a weekly newsletter and help to make as much content free as possible around here. If you join the $10 per month supporters club, you get access to premium tutorials and free access to mini courses!

Become 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.