如何阻止伪元素影响布局？

Question

我使用添加到标题div的伪元素标题作为装饰，但我需要在移动视图中阻止它们影响网站的宽度。

示例（这是它在桌面上的外观，我对此很满意）：

#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;
}

问题是，我希望紫色框偏移到右边，但是这会将页面宽度推到移动视口之外，所以我在手机上得到了一个不受欢迎的水平。示例（如果这有助于使其更清晰，您可以看到用户可能会意外向右滚动，切割页面左侧）：

仅使用CSS，没有脚本;有没有办法制作伪元素＆＃39;隐形＆＃39;到某处的页面宽度？

我不想使用父元素隐藏它们的溢出，因为这将剪切其他伪元素[页面中的其他地方]有效（我使用＆＃34;使用视口单元＆＃34 ;例如，https://css-tricks.com/full-browser-width-bars/#article-header-id-3用于那些有用的人。）

Answer 1

  

仅使用CSS，没有脚本;有没有办法制作伪元素   ＆＃39不可见＆＃39;

您是否考虑使用媒体查询？

@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>