Florian.C Florian.C - 1 year ago 64
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 :


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 Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download