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>