my :: before擬似要素が機能しないのはなぜですか？

Question

::before疑似要素の使用に問題があります。私のペンでは、::beforeと::afterセレクタを使用して、divsの傾斜エッジを与えています。最初のdivでは、これは正常に動作するようです。しかし、2番目の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>

また、ここで私のペンへのリンクです：http://codepen.io/Hudson_Taylor11/pen/XpBMwM?editors=0100

Answer 1

あなたは::beforeスタイルルールにleft: 0を逃しています。私はそれが同じ値ではないautoにデフォルトと思う。ここで

は詳細です：https://developer.mozilla.org/en-US/docs/Web/CSS/left#Values

それは次のようにMDNが記述autoにデフォルト、行います

が表すキーワードである：絶対配置要素のための 、要素の位置は上のベースを右のプロパティと幅を扱う：autoはコンテンツに基づく幅です。

私はそれがどのように計算され、いくつかのブラウザがそれを異なって解釈しているように見えるわけではありません。私はFFがの要素をautoleftとrightの位置に置くと思いますが、通常はstaticの場合に表示されますが、確かにいくつかのテストを行う必要があります。どちらの場合でも、あいまいさを減らすために、常に左か右かどちらか一方を明示的に設定することは、一般的には良い考えです。