DEV Community

Cover image for CSS Nugget: Text Divider in Flexbox
CodyHouse profile image Sebastiano Guerriero
Sebastiano Guerriero for CodyHouse

Posted on

CSS Nugget: Text Divider in Flexbox

#css #tutorial #beginners #webdev

In this tutorial, we'll create a fluid text divider with a single <div>, with the help of Flexbox and pseudo-elements.

Preview

HTML

The structure is super simple: a single <div> containing the label of the divider.

<div class="text-divider">Text divider</div>
Enter fullscreen mode Exit fullscreen mode

CSS

We can use the ::before and ::after pseudo-elements to create two lines on both sides of the label. Because we set the display property of the .text-divider equal to flex, we can apply flex-grow: 1 to the pseudo elements to have them occupy all the available space.

.text-divider {
  display: flex;
  align-items: center; // align text and lines vertically
}

.text-divider::before,
.text-divider::after {
  content: '';
  height: 1px;
  background-color: silver;
  flex-grow: 1; // both lines will expand to occupy the available space
}
Enter fullscreen mode Exit fullscreen mode

A final touch would be using a CSS custom property to set the gap between the label and the lines:

.text-divider {
  display: flex;
  align-items: center;
  --text-divider-gap: 1rem; // set a customizable gap between label and lines
}

.text-divider::before,
.text-divider::after {
  content: '';
  height: 1px;
  background-color: silver;
  flex-grow: 1;
}

.text-divider::before {
  margin-right: var(--text-divider-gap);
}

.text-divider::after {
  margin-left: var(--text-divider-gap);
}
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
devzom profile image
Jacob •

Great work, thanks. :)

Collapse
 
usmanzahidcode profile image
Usman Zahid • • Edited

Here's for vertical one:

  .flex-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
  .line {
    min-height: 70px;
    padding: 0 1px;
    background-color: black;
  }
Enter fullscreen mode Exit fullscreen mode 
<div class="flex-container">
  <div class="line"></div>
  <p>OR</p>
  <div class="line"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

Image description

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Read next

asithalakshan profile image

Incredible New Features in JavaScript ES15 (2024)

Asitha Lakshan -

judith677 profile image

#87 — Merge Data of The Same Group

Judith-Excel-Sharing -

ariflogs profile image

Building an UI library that does not look generic!

Arif Hossain -

luqmanbello profile image

Building Production-Grade ECS Anywhere Infrastructure with Custom Capacity Providers

Luqman Bello -