How to stop pseudo-elements affecting the layout?

Question

I have names using pseudo-elements added to the div header as a decoration, but I need to stop them, affecting the width of the site when in mobile mode.

Example (it looks like this on the desktop, and I am pleased with this):

#block-yui_3_17_2_40_1485776710186_66574::before {
background: rgba(0, 0, 0, 0) linear-gradient(to right, #ee5c6d 0%, #66648b 0%, #91a8d0 40%, #91a8d0 100%) repeat scroll 0 0;
box-sizing: border-box;
content: "";
height: 200px;
left: 10%;
overflow: hidden;
position: absolute;
top: 80%;
width: 100%;
z-index: -9999;
}

The problem is that I want the magenta rectangle to shift to the right, but this pushes the page width beyond the scope of the mobile device, so I get an undesirable horizontal color on the phone. Example (if this helps to make it clearer, you can see that the user can accidentally scroll to the right by cutting the left side of the page):

Using only CSS, no script; is there a way to make pseudo-elements "invisible" to the width of the page in some way?

, [ ], ( " ", https://css-tricks.com/full-browser-width-bars/#article-header-id-3 , ).

Answer 1

CSS, no script; ''

-?

@media screen and (max-width: XXXpx) {
  #block-yui_3_17_2_40_1485776710186_66574::before {
    display:none
  }
}

XXXpx,

Answer 2

, , HTML X.

html {
    overflow-x: hidden;
}

, .

, , , .

( , %), / max-width calc. , , , - :

#block-yui_3_17_2_40_1485776710186_66574::before {
    max-width: 90%; /* your width(100%) - left(10%) properties */
}

, left:10%;. left:2em;, calc, :

#block-yui_3_17_2_40_1485776710186_66574::before {
    max-width: calc(100% - 2em);
}

Answer 3

, position:absolute, . html body. , .

, . , . -, , position:relative. , .

body {
  margin:0;
}
.wrapper {
  position: relative;
}
.box {
  position: static;
  max-width:1000px;
  background: red;
  height:300px;
  margin: 50px auto 0;
}
.box:before {
  background: rgba(0, 0, 0, 0) linear-gradient(to right, #ee5c6d 0%, #66648b 0%, #91a8d0 40%, #91a8d0 100%) repeat scroll 0 0;
  box-sizing: border-box;
  content: "";
  height: 200px;
  right: 0;
  overflow: hidden;
  position: absolute;
  top: 80%;
  width: 90%;
  z-index: -1;
  max-width: 1000px;
}
@media screen and (min-width: 1200px) {
  .box {
    position: relative;
  }
  .box:before {
    margin-left: 0;
    left: 10%;
    right: auto;
    width: 100%;
  }
}

<div class="wrapper">
  <div class="box">

  </div>
</div>

Hide result