html - 如何防止 ::after 元素拉伸页面大小？

Question

我正在为我的新网站设计一个结构，我需要倾斜的导航栏来匹配我给出的设计。由于我使用 Bootstrap，因此我使用了标准导航栏模板，其中的选项使用ml-auto. 我还需要最后一个元素在末端有一个垂直边缘。

我是这样实现的：

    .main-nav ui{
        width: 100%;
        height: auto;
    }

    .main-nav li{
        display: inline-block;
        margin-right: -4px;
        width: 100px;
    }

    .nav-item a{
        position: relative;
        background-color: mediumblue;
        box-sizing: border-box;
        display: block;
        transform: skewX(25deg);
        width: 100%;
        min-height: 3em;
        text-align: center;
     }

    .nav-item:last-of-type a::after{
        content:"";
        position: absolute;
        background: mediumblue;
        top:0;
        bottom: 0;
        left: 82%;
        width: 30%;
        transform: skewX(-25deg);
    }

    .main-nav .active a, .main-nav .active a::after {
        background-color: blue;
    }

    .main-nav a:hover, .main-nav a:hover::after{
        background-color: dodgerblue;
    }

    .button-label {
        position: absolute;
        box-sizing: border-box;
        transform: translate(-50%, -50%) skewX(-25deg);
        top: 50%;
        left: 50%;
    }

      <div class="collapse navbar-collapse main-nav" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#"><span class="button-label">Home <span class="sr-only">(current)</span></span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><span class="button-label">Link</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#"><span class="button-label">Disabled</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#"><span class="button-label">About</span></a>
          </li>
        </ul>
</div>

该解决方案总体上看起来很棒，但是该::after元素会导致页面变宽。实际上整个网站的右边缘有丑陋的空条，浏览器显示水平滚动条。有没有办法防止它发生？

用于可视化目的的屏幕截图

标签： htmlcss