创建顶部和底部边框比格本身

Question

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

- 
texttext 
    - 

我的代码组成的div在里面有多个p，所以我想短边界在div左右。有没有一种方法来实现这一目标？

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>