如何阻止伪元素影响布局？ [英] How stop pseudo elements affecting layout?

问题描述

我使用添加到标题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％）重复滚动0 0; 
 box-sizing：border-box; 
 content：; 
 height：200px;还剩
：10％; 
 overflow：hidden; 
位置：绝对; 
 top：80％; 
宽度：100％; 
 z-index：-9999; 
} 
  

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

只使用CSS，没有脚本;有没有办法让伪元素在页面宽度上不可见？

我不想用父元素来隐藏它们的溢出，因为这会夹住其他可以工作的伪元素[页面中的其他地方]这里使用使用视口单位示例， https： //css-tricks.com/full-browser-width-bars/#article-header-id-3 ）。

解决方案

通过使用 position：absolute ，您可以从页面结构中取出一个元素，就像您已经完成的那样。然而，伪元素将始终是 html 和 body 的一部分。可悲的是，没有办法解决这个问题。

我想出了一些笨拙的解决方案，因此可能不适合您的需求。它涉及在每个包含伪元素的内容元素周围添加一个全宽度包装器。这允许您使用媒体查询来更改哪个父元素具有 position：relative 。然后，您可以将伪元素从父窗口左侧的绝对位置切换到窗口右侧，并调整宽度并设置最大宽度。

  body {margin：0;}。wrapper {position：relative;}。box {position：static;最大宽度：1000像素;背景：红色;高度：300像素; margin：50px auto 0;} box：before {background：rgba（0,0,0,0）线性渐变（向右，＃ee5c6d 0％，＃66648b 0％，＃91a8d0 40％，＃91a8d0 100％ ）重复滚动0 0;盒子尺寸：边框;内容：; height：200px;正确：0;溢出：隐藏;位置：绝对;顶部：80％;宽度：90％; z-index：-1;最大宽度：1000px;} @媒体屏幕和（最小宽度：1200px）{.box {position：relative; } .box：之前{margin-left：0;左：10％;右：自动;宽度：100％; }  

 < div class =wrapper> < div class =box> < / div>< / div>  

I have titles using pseudo elements added to the title div as decoration, but I need to stop them affecting the width of a site when in mobile view.

Example (this is how it looks on desktop, and I am happy with this):

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

The issue is, I want the purple box offset to the right but this is pushing the page width outside of the mobile viewport, so I get an undesirable horizontal on the phone. Example (if this helps make it clearer, you can see the user can accidentally scroll right, cutting of the left of the page):

Using only CSS, no script; is there a way of making pseudo elements 'invisible' to the page width in someway?

I don't want to hide their overflow using a parent element, as this will clip-in other pseudo elements [elsewhere in the page] that do work (I used the "Using viewport units" example here, https://css-tricks.com/full-browser-width-bars/#article-header-id-3 for those that do work).

解决方案

An element can be taken out of the structure of the page by using position:absolute as you have already done. However the pseudo elements will always be part of the html and body. Sadly there is no way around that.

I have come up with a bit of a clumsy solution, so it may not suit your needs. It involves adding a full width wrapper around each of your content elements that have pseudo elements. This allows you to use media queries to change which parent element have position:relative. You can then switch the pseudo elements absolute position from left of the parent, to right of the window and adjust the width and set a max-width.

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>

这篇关于如何阻止伪元素影响布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！