How stop pseudo elements affecting layout?

问题

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).

回答1:

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

Did you think about using media queries ?

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

If width is less than XXXpx, this pseudo element won't be displayed anymore

回答2:

There is a fairly quick solution to this that involves forcing your document to retain viewport width by setting the overflow on HTML to hidden on the X axis.

html {
    overflow-x: hidden;
}

This is the quick solution and not the best solution.

The best practice is to ensure that your pseudo element does not over extend to be wider than it should be.

This can generally be achieved by using responsive units of measurements (in this case, measure using %), adjusting overflow values on parent containers, and/or using max-width and calc properties. As an example, you could for instance use something like this:

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

This is based on your property that is currently using a left:10%; rule. If you were as an example using left:2em; you could use add a calc function like this:

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

回答3:

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>

来源：https://stackoverflow.com/questions/41947434/how-stop-pseudo-elements-affecting-layout

标签

html

css

css3