Question

我在使用::before伪元素时遇到问题。在我的笔中，我使用::before和::after选择器给我的div倾斜边缘。在第一个div，这似乎工作正常。但是，在第二个div上，倾斜只是拉伸div宽度的50％。这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

另外，这里是我笔的链接：http://codepen.io/Hudson_Taylor11/pen/XpBMwM?editors=0100

Answer 1

您在left: 0样式规则上缺少::before。我认为它默认为auto，这不是相同的值。

以下是详细信息：https://developer.mozilla.org/en-US/docs/Web/CSS/left#Values

默认为auto，MDN描述如下：

是一个代表以下内容的关键字：对于绝对定位的元素，元素的位置基于正确的属性和处理宽度：auto作为基于内容的宽度。

我并不完全确定如何计算这一点，而且某些浏览器似乎对此有不同的解释。我认为FF会（或曾经）将absolutely个定位元素与auto left和right放在一起，如果它们static通常会出现在{{1}}，我必须建立一些测试才能确定。在任何情况下，总是明确设置左，右或两者以减少歧义通常是个好主意。

为什么我的:: before伪元素不起作用？

1 个答案: