如何停止影响布局的伪元素？

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，不使用脚本；有没有办法以某种方式使伪元素对页面宽度“不可见”？

我不想使用父元素隐藏它们的溢出，因为这将夹入其他有效的伪元素[页面中的其他位置]（我在这里使用了“使用视口单元”示例，https://css-tricks.com/full-browser-width-bars/#article-header-id-3对于那些工作的人）。

Answer 1

仅使用 CSS，不使用脚本；有没有办法制作伪元素 '隐形'

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

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