AdiYogi AdiYogi - 3 months ago 11
CSS Question

Centered content and lines on each side filling the remaining space

<div class="text-mid">
<span>TEXT</span>
</div>


CSS

.text-mid {
display:block;
margin: 10px;
padding; 10px;
}


I want the arrangement as like in image →
enter image description here

Edit

I would prefer a solution w/o Flexbox

Answer Source

This is very easily done using the pseudo elements

By using both, this will also be completely transparent towards its background.

The main trick is to set overflow: hidden on the wrapper and a width on each pseudo enough to cover all possible width's

.text-mid {
  margin: 10px;
  padding: 10px;
  text-align: center;
  overflow: hidden;
}
.text-mid span {
  position: relative;
  padding: 0 5px;
}
.text-mid span::before,
.text-mid span::after {
  content: '';
  position: absolute;
  width: 50vw;
  top: 50%;
  border-top: 1px solid black;
}
.text-mid span::after {
  left: 100%;
}
.text-mid span::before {
  right: 100%;
}
<div class="text-mid">
  <span>TEXT</span>
</div>