我正在创建一个带有导航选项卡的水平菜单。当这些选项卡在小型设备中向左浮动时,为了假装它们看起来更真实,我添加了一个::after 伪元素来扩展它们的高度。
但是 li 宽度比 li::after 宽度大 2px。
没有 :hover、:focus 和其他标签样式的 sass 看起来像这样:
.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;
}
}
}
最佳答案
绝对定位宽度不考虑边界……这就是问题所在。
所以你必须相应地调整
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>
关于css -::after 伪元素宽度与内容不同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46607687/