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

我有使用添加到标题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那些工作）。

来源

2017-01-30 a1652

你能分享其代码？ HTML？ – Aman

请分享重现问题的HTML和CSS。看看如何创建一个[mcve] –

只使用CSS，没有脚本;有没有一种制作伪元素的方法 '隐形'

您是否想过使用媒体查询？

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

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

来源

2017-01-30 23:56:16 LIIT

谢谢 - 它会停止这个问题，但我宁愿不要完全失去这种风格，也许“隐形”这个词容易让人误解 - 我所说的“隐形”只是意味着布局，没有完全。我想另一种说法是：有没有用CSS来“装饰”的方法，但规定它会影响父元素的结构？ – a1652

有一个相当快的解决这个涉及强迫你的文档通过设置HTML的溢出保留视口宽度隐藏在X轴上。

html { 
    overflow-x: hidden; 
}

这是快速的解决方案，而不是最好的解决方案。

最好的做法是确保您的伪元素不会超过它应该扩展的范围。

这通常可以通过使用响应度量单位（在这种情况下，使用％来度量），调整父容器上的溢出值和/或使用最大宽度和计算属性来实现。举个例子，你可以例如使用这样的事情：

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

这是基于当前使用left:10%;规则你的财产。如果您在使用left:2em;是作为一个例子，你可以使用添加钙的功能是这样的：

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

来源

2017-06-09 12:20:19 Frits

一个元素可以通过使用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>

来源

2017-06-09 13:13:19 WizardCoder

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

回答

相关问题