html – How to go beyond the width of the parent block with absolute positioning and stretch this block to the borders of the edges of the browser window

Question:

How to get out of the width of the parent block with absolute positioning? It is necessary for the pseudo-element (its background) to be stretched outside the .container .

.container {
  width: 960px
}
.element {
  position: relative;
}
.element:after {
  content: "";
  position: absolute;
  bottom: 0;
  background: url(picture.png);
  width: 250px;
  height: 25px;
}
<div class="container">
  <div class="parent">
    <div class="element">
      text
    </div>
  </div>
</div>

Answer:

If you need to stretch not to some container, but to the browser window, then you can use vw :

section {
  width: 200px;
  outline: 1px dotted red;
  height: 100px;
  position: relative;
  margin: auto;
}

section:after {
  content: "";
  position: absolute;
  left: calc((100% - 100vw) / 2);
  bottom: 0;
  height: 50px;
  width: 100vw;
  background: silver;
}
<section></section>
Scroll to Top