H. Allen H. Allen - 1 year ago 67
CSS Question

Why is my ::before pseudoclass not working?

I am having trouble using the

::before
pseudoclass. In my pen, I'm using the
::before
and
::after
selectors to give my divs slanted edges. On the first div, this seems to work fine. But, on the second div, the slant is only stretching 50% of the width of the div. Here's my code:



.services {
text-align: center;
background: linear-gradient(to right, #F1F2B5 , #135058);
height: 250px;
width: 100%;
position: relative;
}
.services::before {
content: "";
background: linear-gradient(to right, #F1F2B5 , #135058);
width: 100%;
height: 200px;
transform: skewY(-5deg);
position: absolute;
top: -100px;
z-index: -1;
}
.flex {
display: flex;
width: 100%;
border: 1px solid red;
}
.box-alt {
width: 100px;
height: 100px;
background-color: blue;
border: 3px solid grey;
transform: rotate(45deg);
}

<div class="services">
<h2>Services</h2>
<hr />
<div class="flex">
<div class="box-alt">hi</div>
<div class="box-alt">hi</div>
<div class="box-alt">hi</div>
</div>
</div>





Also, here's the link to my pen: http://codepen.io/Hudson_Taylor11/pen/XpBMwM?editors=0100

Answer Source

You're missing left: 0 on the ::before style rule. I think it defaults to auto which is not the same value.

Here's the details: https://developer.mozilla.org/en-US/docs/Web/CSS/left#Values

It does default to auto, which MDN describes as follows:

Is a keyword that represents: for absolutely positioned elements, the position of the element based on the right property and treat width: auto as a width based on the content.

I'm not entirely certain how that gets calculated and some browsers seem to interpret that differently. I think FF will (or used to) leave absolutely positioned elements with an auto left and right where they normally would appear if they were static, but I'd have to build some tests to be sure. In any case, it's generally a good idea to always explicitly set left, right, or both to reduce ambiguity.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download