Florian.C Florian.C - 15 days ago 6
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:

-
texttext
-


My code consists of a
div
with multiple
p
inside of it so I would like the short borders to be around 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>

Comments