Florian.C Florian.C - 22 days ago 5
CSS Question

Create top and bottom borders smaller than the div itseld

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

-
texttext
-


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

Answer

Use :before and :after pseudo elements:

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