创建小于div本身的顶部和底部边框

Question

我有一些文字，我希望顶部和底部边框看起来像一个破折号，有点像这样：

*** Nested Loop ***
one + four
one + five
two + four
two + five
three + four
three + five
*** Nested Stream ***
one + four
one + five
two + four
two + five
three + four
three + five
*** Flatmap *** 
? + four
? + five
? + four
? + five
? + four
? + five

我的代码包含 - texttext - ，其中包含多个div，因此我希望短边框位于p附近。有没有一种方法来实现这个目标？

Answer 1

使用:before和:after伪元素：

.text {
  position: relative;
  text-align: center;
  line-height: 20px;
  padding: 5px;
}

.text:before,
.text:after {
  transform: translateX(-50%);
  position: absolute;
  background: #000;
  content: '';
  width: 50px; /* change width to increase or decrease border */
  height: 1px;
  left: 50%;
  top: 0;
}

.text:after {
  top: auto;
  bottom: 0;
}

<div class="text">Some text here</div>