Placing text on top of vertical rule using CSS

user_13847690 0
Viewed 42

I want to place OR text on top of the vertical rule(border-right) as shown in the image. No idea how to place it.

.left_col {
  border-right: 1px solid black;
}
<div class="container mt-5">
  <div class="row">
    <div class="col-md-6 left_col">
      /* left column content */
    </div>
    <div class="col-md-6">
      /* right column content */
    </div>
  </div>
</div>

enter image description here

css
2 Answers

You can absolutely position a pseudo element:

.left_col {
  position: relative;
  border-right: 1px solid black;
}

.left_col:after {
  content: 'or';
  display: inline-block;
  padding: 0.25em 0.5em;
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(-50%, -50%);
  background: orange;
}


/*following just for this demo not needed*/

.row {
  display: flex;
}

.col-md-6 {
  height: 100px;
  width: 50%;
}
<div class="container mt-5">
  <div class="row">
    <div class="col-md-6 left_col">
      /* left column content */
    </div>
    <div class="col-md-6">
      /* right column content */
    </div>
  </div>
</div>

user_17909820

why don't you do this?

<div class="container mt-5">
    <div class="row">
        <div class="col-md-6 left_col">
            <span>OR<span>
            /* left column content */
        </div>
        <div class="col-md-6">
            /* right column content */
        </div>
    </div>
</div>

in your css

.left_col {
position: relative;
}

span{
    position: absolute;
    top: 40%;
    right: -10px;
}
user_145688170
Related