css -::after 伪元素宽度与内容不同

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>