css - 使用 CSS 将文本放置在垂直规则之上

Question

如图所示，我想将 OR 文本放置在垂直规则 ( border-right) 的顶部。不知道如何放置它。

.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>

标签： css

Answer 1

您可以绝对定位伪元素：

.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>