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

Question

我正在创建一个带导航标签的水平菜单。当这些标签在小设备中向左浮动时，为了假装它们看起来更真实，我添加了一个:: after伪元素来扩展它们的高度。

但是li宽度比li ::宽度大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

绝对定位宽度不考虑边界......这就是问题。

所以你必须相应调整

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>

Answer 2

这是因为您使用position: absolute;到&::after，没有父position: relative;将position: relative应用于.nav-tabs

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

试试这个，这对你有帮助。