Создать верхние и нижние границы меньше, чем сам 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>