Florian.C Florian.C - 2 months ago 14
HTML Question

Create top and bottom borders smaller than the div itself

I have some text, and I would like to have a top and bottom border looking like a dash, kinda like this:


My code consists of a
with multiple
inside of it so I would like the short borders to be around the
. Is there a css way to achieve this?


Use :before and :after pseudo elements:

.text {
  position: relative;
  text-align: center;
  line-height: 20px;
  padding: 5px;

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