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

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

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

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

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

我不想使用父元素来隐藏它们的溢出，因为这将在[页面中的其他地方]截取其他可以工作的伪元素（我在这里使用了“使用视口单位”示例，用于那些可以工作的伪元素）

只使用CSS，不使用脚本；有没有制作伪元素的方法 “看不见的”

你想过使用媒体查询吗

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

---

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

有一个相当快速的解决方案，通过将HTML上的溢出设置为X轴上的隐藏，强制文档保留视口宽度

html {
    overflow-x: hidden;
}

这是快速解决方案，而不是最佳解决方案

最佳实践是确保伪元素不会过度扩展到超出其应有的范围

这通常可以通过使用响应测量单位（在本例中，使用%）来实现，调整父容器上的溢出值，和/或使用最大宽度和计算属性。例如，您可以使用如下内容：

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

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

这基于您当前使用

左：10%的属性规则。如果您使用
left:2em可以使用如下方式添加计算函数：

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

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

可以使用
position:absolute
从页面结构中提取元素，就像您已经做的那样。但是，伪元素将始终是
html
和
正文的一部分。可悲的是，这是无法避免的

我想出了一个有点笨拙的解决办法，所以它可能不适合你的需要。它包括在每个包含伪元素的内容元素周围添加一个全宽度包装。这允许您使用媒体查询来更改哪个父元素具有
位置：相对
。然后可以将伪元素绝对位置从父对象的左侧切换到窗口的右侧，并调整宽度并设置最大宽度


正文{
保证金：0；
}
.包装纸{
位置：相对位置；
}
.盒子{
位置：静态；
最大宽度：1000px；
背景：红色；
高度：300px；
保证金：50px自动0；
}
.盒子：以前{
背景：rgba（0,0,0,0）线性渐变（向右，#ee5c6d 0%，#66648b 0%，#91a8d0 40%，#91a8d0 100%）重复滚动0；
框大小：边框框；
内容：“；
高度：200px；
右：0；
溢出：隐藏；
位置：绝对位置；
最高：80%；
宽度：90%；
z指数：-1；
最大宽度：1000px；
}
@媒体屏幕和屏幕（最小宽度：1200px）{
.盒子{
位置：相对位置；
}
.盒子：以前{
左边距：0；
左：10%；
右：自动；
宽度：100%；
}
}

谢谢–这会解决问题，但我不想完全失去风格，也许“隐形”这个词会误导我–我说的“隐形”只是指布局的结构，不是完全的。我想另一种说法是；有没有一种方法可以“装饰”CSS，但规定它应该影响父元素的结构？你能分享它的代码吗？html？请共享重新创建问题的html和CSS。请参见如何创建