爲什麼我的:: before僞元素不工作？

Question

我在使用::before僞元素時遇到問題。在我的筆中，我使用::before和::after選擇器爲我的div傾斜邊緣。在第一個div，這似乎工作正常。但是，在第二個div上，斜線僅延伸div的寬度的50％。這裏是我的代碼：

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

而且，這裏的鏈接到我的筆：在::before樣式規則http://codepen.io/Hudson_Taylor11/pen/XpBMwM?editors=0100

Answer 1

你錯過left: 0。我認爲它默認爲auto，這是不一樣的價值。

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

它確實默認爲auto，其中MDN描述如下：

是表示關鍵字： 的絕對定位的元素，該元素的位置基於正確的屬性和寬度：自動作爲基於內容的寬度。

我不完全確定如何計算，一些瀏覽器似乎有不同的解釋。我認爲FF會（或曾經）將absolutely定位的元素與autoleft和right定位元素，他們通常會出現，如果他們是static，但我必須建立一些測試以確保。無論如何，總是明確設置左，右或兩者以減少歧義通常是一個好主意。