::在僞元素寬度不同的內容

Question

我正在創建一個帶有導航選項卡的水平菜單。當這些標籤在小設備中浮動時，假裝它們看起來更真實，我添加一個:: after僞元素來擴展它們的高度。

但李寬度爲2px比李::後寬更大。

青菜無：懸停：對焦等標籤的樣式看起來是這樣的：

.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: absolute;到&::after，沒有父具有position: relative;應用position: relative到.nav-tabs

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