::在伪元素宽度与内容不同之后

Question

我正在创建一个带有导航选项卡的水平菜单。当这些标签在小型设备中向左浮动时，为了假装它们看起来更真实，我添加了一个 ::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;
      }

   }
}

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; to &::after，没有父级有position: relative; Apply position: relative to .nav-tabs

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

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