How to make a vertical text divider, in CSS?

Question

In HTML CSS how to make a vertical divider to separate two sections.

::before and :: after do not work. Any genius trick would be appreciated.

I also tried margins, but they arent as good. Maybe we can try one div before and one after the text, and give them minimum height and 1px horizontal padding and some bg color. Heres the needed output: Vertical text divider css

score 2 · Answer 1 · answered Jul 01 '23 at 10:37

It works with the ::before and ::after pseudo-elements as well.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .flex-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
      }
      .flex-container:before, .flex-container:after {
        content: "";
        min-height: 70px;
        padding: 0 1px;
        background-color: black;
      }
    </style>
</head>
<body>
    
    <div class="flex-container">
      <p>OR</p>
    </div>
</body>
</html>

score 0 · Answer 2 · edited Jul 03 '23 at 13:14

I found the solution:

.flex-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
      }
      .line {
        min-height: 70px;
        padding: 0 1px;
        background-color: black;
      }

    <div class="flex-container">
      <div class="line"></div>
      <p>OR</p>
      <div class="line"></div>
    </div>

How to make a vertical text divider, in CSS?

2 Answers2