CODEWITHSUNDEEP
htmlcss
Hudson Taylor
Hudson Taylor

Reputation: 1162

Why is my ::before pseudo-element not working?

I am having trouble using the ::before pseudo-element. 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

Upvotes: 0

Views: 1398

Answers (1)

Joseph Marikle
Joseph Marikle

Reputation: 78520

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.

Upvotes: 3

Related Questions