While working on a UI, we needed to add a line separator between two sections. Here it is:

On smaller viewports, the line will become horizontal:

Let’s take a look at the HTML.

We have a section, with two main child items. Between them, we will have a line separator.

In CSS, we will use flexbox to handle the layout.

We added a 1rem gap between each one, and also each child item should fill 50% of its parent. Here is the result:

Next step, we want to center the two items vertically, so we will use align-items on the parent.

Now the two items are centered (we added the red line to make it easy to spot that). You might be asking, what does that have to do with the separator?

Adding The Separator

We wanted to add this as a pseudo-element, so we wrote this CSS. Can you expect the visual result of this without scrolling down?

Oh, what is that little square doing over here? Since the pseudo-element is only a 1px border from all sides, the result will be 2*2` square.

Let’s focus a bit here. This is the core of this little CSS trick.

The square comes from using the same color for each border. With different colors, it can look like this.

Why the Separator Looks Like a Square?

Since we added align-items: center to center the child items vertically, we removed the default behavior of flexbox stretching child items (stretching vertically, in this case).

Now it looks like the following visual:

Next, we need to reorder the flex items to make the divider appears between them.

And we’re done!

To make this work on all screen sizes, we need to have the flex-direction: column mobile and flex-direction: row for larger screens.

Here is a video of changing the flex-direction. Notice how the separator changes!

‍

This works like magic because it’s a flexbox behavior.

When flex-direction: row is set, the cross-axis is vertical thus the pseudo-element stretches vertically.

And when the cross-axis is set to flex-direction: column, it will be horizontal and so the pseudo-element stretches horizontally.

Isn’t that neat? No need to use width, height, or anything else! It’s just a border being stretching via flexbox.

The Separator Thickness

Since the border value contributes to the four directions, we need to use 0.5x of the thickness we want. For example, if we want a 1px separator, then the border should be like the following:

Gradient Separators

This is another reason for us to pick the border solution above others. We can use gradients via border-image.

Dashed Separators

Given that we’re using borders, we can also have a dashed separator.

Another Way of Doing It

If we haven’t taken the time to think about implementing this, then we might have used width and height. We are not saying the following is a bad solution, but it’s good to step out of solutions we took for granted and think of other ways of solving UI problems.

Source: https://ishadeed.com/