How to make a vertical text divider, in CSS?

139 Views Asked by The logo Maker At 01 July 2023 at 10:21

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

Original Q&A

There are 2 best solutions below

The logo Maker On 01 July 2023 at 10:23

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>

Md. Rakibul Islam On 01 July 2023 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>

How to make a vertical text divider, in CSS?

There are 2 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in FLEXBOX

Related Questions in SEPARATOR

Related Questions in DIVIDER

Trending Questions

Popular # Hahtags

Popular Questions