::在伪元素宽度不同的内容

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>