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

Question

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

    -
texttext
    -

我的代码由一个 div 和多个 p 组成，所以我希望短边框位于 div 周围。有没有 css 方法来实现这个？

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>

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

Create top and bottom borders smaller than the div itself

html

css

border