なぜ親要素のdivに従って計算されない:: after要素の幅の幅ですか？

Question

私はこの質問を実装しようとしています：How to set background image of outer div only to the right of inner div?

それは、このcodepenに提示されている：私が欲しいものhttp://codepen.io/anon/pen/WpNVmJ

はイエロー画像自体を繰り返すことです。それは完全にそのcodepenで動作していますが、私は実際のコードで実装しようとするとうまくいきません。

実際にはイメージは単色ではなく、ヘッダーに一致するストライプです。勾配に基づく解決法はこれに対しては機能しません。

これは私の本当のhtmlです：

<div class="off-canvas-wrap" data-offcanvas> 
    <div class="inner-wrap"> 

     <header> 
     <div class="top-row"> 
      <a href="/index.html" class="clickable-area"></a> 
      <div class="top-ad"> 
      <script> 
      </script> 
      </div> 
     </div> 
     ... 
     </header> 
     ... 
    </div> 
</div> 

は、これは、関連するSCSSである：私は基礎5 SCSSを必要とするのでcodepen作業を取得

.top-row { 
    position: relative; 
    @media #{$large-up} { 
     height: 110px; 
    } 
    } 

.top-row::after { 
    content: ""; 
    display: block; 
    background: url("../images/above-menu-graphic-215-1px.png") repeat-x; 
    position: absolute; 
    top: 0px; 
    right:0px; 
    height: 110px; 
    width: calc(50% - #{$row-width/2}); 
} 

は不可能か、あまりにも多くの仕事です。クロムで検査

は、私はちょうどcalc(50%)またはちょうど50%それが600pxを示しする幅を変更すると::は、要素の後に0
の幅を持っていることを示しています。
top-rowの幅は1200pxに制限されていますが、ヘッダーはブラウザのサイズと同じです。

幅は、ではなく、headerの50％である必要があります。

より正確には、calc(50% - $row-width/2)であり、$ row-width/2は600px（実際には覚えている）として正しく計算されるため、問題はありません。

this :: after要素の幅が親のように設定されるのはなぜですかで、<header>ではないのですか？

どのように動作させるには？

Answer 1

あなたが「.top-rowは.top-row::afterの親であってはいけません」というコメントに基づいて、あなたは::afterのことを混乱させると思われます。

::afterは、選択した要素の子の最後に来る仮想要素の擬似セレクタです。

あなたのコードで

、.top-row::afterで::afterがここに表示されます：

<div class="top-row"> 
    <a href="/index.html" class="clickable-area"></a> 
    <div class="top-ad"> 
    <script> 
    </script> 
    </div> 
    ::after 
</div> 

それで仮想::after要素の親が.top-rowです。