Johan Gudmundsson Johan Gudmundsson - 2 months ago 7
CSS Question

Force hr to start outside of parent container

I got some HTML code looking like this

<div class="container">
<!-- SOME OTHER CONTEN HERE -->
<hr>
<!-- SOME OTHER CONTENT HERE -->
</div>


The class container got a width of 90% and I want the hr to go from side-to-side of the screen. To give the hr the correct width i use width: 100vw but the it will still start where the .container class starts, I tried to solve this by using margin-left: -10% but this does not work on all different resolutions, I have also tried position absloute and left: 0 but this messed up the flow of the content that is above and under it.

.container {
width: 90%
}

hr {
width: 100vw;
}


How can i make sure that hr go side-to-side of the screen without messing up the flow of the content above and under it?

Answer

I would apply the following CSS to hr that hides the hr and make a :after pseudo element to take the effect, using left and transform is to avoid the :after exceed the page width and causing a horizontal scroll

hr { margin-bottom: 1px; height: 0; border: 0; position: relative; }
hr:after {
  display: inline-block;
  content: '';
  position: absolute;
  bottom: 1px;
  left: 50%; // Positioning
  height: 1px;
  width: 100vw;
  background-color: #e5d5d5;
  -webkit-transform: translateX(-50%); // Positioning
  transform: translateX(-50%); // Positioning
}

Try on: https://jsfiddle.net/Zay_DEV/n16uysLn/