:: after擬似要素の幅が内容と異なる

Question

ナビゲーションタブ付きの水平メニューを作成しています。これらのタブが小さなデバイスに残っているとき、よりリアルに見せかけるために、高さを伸ばすために:: after pseudo-elementを追加します。

は、しかし、李幅は、Li ::幅後より2ピクセル大きいです。

SASSなし：、ホバー：フォーカスと他のタグスタイルは、次のようになります。あなたは&::afterからposition: absolute;を使用していたので、これは

.nav-tabs { 
    & > li { 
     border: 1px solid $gray-light; 
     border-bottom-color: white; 
     border-top-right-radius: 20px; 
     border-top-left-radius: 20px; 
     padding: 0 $margin-default; 

     &::after { 
     display: block; 
     position:absolute; 
     height:200px; 
     width: 100%; 
     z-index: -2; 
     left: 0; 
     border-left: 1px solid $border-color; 
     border-right: 1px solid $border-color; 
     } 

    } 
} 

Answer 1

、position: relative;は.nav-tabs

に position: relativeを適用している親はありません

.nav-tabs { 
    position: relative; 
     & > li { 
     /* Your styles */ 
     } 
     &::after { 
     /* Your styles */ 
    } 
} 

これを試してください。これは本当に役に立ちます。

Answer 2

絶対配置幅は境界線を考慮していません...それが問題です。

だから、それに応じて

calcを調整する必要があります、ここでは良いオプションです。

div { 
 
    width: 200px; 
 
    border-width: 0 10px 0; 
 
    border-style: solid; 
 
    border-color: red; 
 
    height: 200px; 
 
    margin: 3em auto; 
 
    position: relative; 
 
} 
 

 
div::after { 
 
    content: ""; 
 
    width: 100%; 
 
    width: calc(100% + 20px); 
 
    /* 2 x 10px */ 
 
    height: 2em; 
 
    position: absolute; 
 
    bottom: 100%; 
 
    background: pink; 
 
    left: -10px; 
 
    /* 1x border-width */ 
 
}

<div></div>