CODEWITHSUNDEEP
htmlcssborder
DevBob
DevBob

Reputation: 835

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?

Upvotes: 1

Views: 536

Answers (1)

Mohammad Usman
Mohammad Usman

Reputation: 39322

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>

Upvotes: 4

Related Questions