Question 198190 in Html Question posted in
Some basic documentation can be found here.

Html – How to make a vertical text divider, in CSS?

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>

  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search