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 o

Solution 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

Solution 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);
}

Solution 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, #ee5c6d0%, #66648b0%, #91a8d040%, #91a8d0100%) repeat scroll 00;
  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%;
  }
}

<divclass="wrapper"><divclass="box"></div></div>