css 添加伪元素：before与：after对所覆盖标签的影响

 <div class="box121">
            <ul>
              <li class="lib">
                <a href="搜索.html">搜索</a>
              </li>
              <li class="lib">
                <a href="首页.html">首页</a>
              </li>
              <li class="lib">
                <a href="文档.html">文档</a>
              </li>
              <li class="lib">
                <a href="音乐.html">音乐</a>
              </li>
              <li class="lib">
                <a href="图片.html">图片</a>
              </li>
              <li class="lib">
                <a href="个人中心.html">个人中心</a>
              </li>
            </ul>
          </div>

这是html代码

.box121 ul{
        display: flex;
        justify-content: space-between;
        align-items: center;
        list-style: none;
        margin: 0px 20px;
      }
      .box121 ul li {
        margin-left: 15px;
        line-height: 40px;
        text-align: center;
        transition: 0.6s ease-in-out;
        position: relative;
      }
      .box121 ul li::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 10px;
        transition: 0.5s;
        border-top: 2px solid rgb(247, 107, 113);
        border-left: 2px solid #f76b71;
      }

      .box121 ul li::after {
        content: "";
        position: absolute;
        right: 0px;
        bottom: 0px;

        height: 10px;
        width: 10px;
        transition: 0.5s;
        border-bottom: 2px solid #f76b71;
        border-right: 2px solid #f76b71;
      }
      .box121 ul a {
        padding: 5px 20px;
        text-decoration: none;
        color: #e5e8ea;
        opacity: 0.9;
        cursor: pointer;
        text-shadow: 6px 6px 20px rgba(0, 0, 0, 0.9);
      }

这是css部分

运行的页面

就是a标签不起作用，点击也没用，不会跳转页面。

解决办法：就是在css中给a标签加position:relative和z-index,z-index的值尽量调大

.box121 ul a {
        position: relative;
        z-index: 5;
        padding: 5px 20px;
        text-decoration: none;
        color: #e5e8ea;
        opacity: 0.9;
        cursor: pointer;
        text-shadow: 6px 6px 20px rgba(0, 0, 0, 0.9);
      }

 再运行

可以跳转