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

Question

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

示例(这是它在桌面上的样子，我对此很满意):

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

问题是，我希望紫色框向右偏移，但这会将页面宽度推到移动视口(viewport)之外，所以我在手机上得到了一个不希望出现的水平方向。示例(如果这有助于使它更清楚，您可以看到用户可能不小心向右滚动，剪切了页面的左侧):

只使用CSS，没有脚本；有没有办法以某种方式使伪元素对页面宽度“不可见”？

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

Answer 1

Using only CSS, no script; is there a way of making pseudo elements 'invisible'

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

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

如果宽度小于XXXpx，这个伪元素将不再显示