創建頂部和底部邊框比格本身

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>