oberen und unteren Grenzen kleiner als die div selbst

Question

ich einen Text haben, und ich möchte eine obere und untere Grenze wie ein Strich suchen haben, ein bisschen wie folgt aus:

- 
texttext 
    - 

Mein Code besteht aus einem div mit mehreren innerhalb davon, so möchte ich die kurzen Grenzen um die div sein. Gibt es einen Weg, dies zu erreichen?

Answer 1

Verwenden :before und :after Pseudoelemente:

.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>