如何使用纯css在按钮悬停时显示按钮内的字符串？

Question

如何在悬停时在我的按钮中显示字符串“联系人”。我拥有的所有其他按钮都包含我将我的 html 文件链接到在头部使用 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"> 的图标。所有带有悬停图标的按钮在动画后显示为白色。但是在 标签之间只有 和字符串“Contact”的按钮不会在悬停时显示？我不知道这是为什么，也不知道如何解决。

HTML

<header id="header">

            <nav id="nav">
                <div class="middle">
                    <ul>
                        <li>
                            <a class="btn" href="contact.html">
                                <i>Contact</i>
                            </a>
                        </li>
                        <li>
                            <a class="btn" href="#">
                                <i class="fab fa-linkedin"></i>
                            </a>
                        </li>
                        <li>
                            <a class="btn" href="#">
                                <i class="fab fa-github"></i>
                            </a>
                        </li>
                        <li>
                            <a class="btn" href="#">
                                <i class="fab fa-twitter"></i>
                            </a>
                        </li>
                    </ul>
                </div>

            </nav>
        </header>

CSS

.middle{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
  }
  .btn{
    display: inline-block;
    width: 95px;
    height: 90px;
    /* background color of the button */
    /* background: #f1f1f1; */
    margin: 10px;
    border-radius: 30%;
    box-shadow: 0 5px 15px -5px #00000070;
    /* color: #0015ff; */
    /* color: #fff; */
    overflow: hidden;
    position: relative;
  }
  .btn i{
    line-height: 90px;
    font-size: 25px;
    transition: 0.2s linear;
  }
  .btn:hover i{
    transform: scale(1.7);
    color: #f1f1f1;
  }
  .btn::before{
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    /* background: #3498db; */
    background: #0015ff;
    transform: rotate(45deg);
    left: -110%;
    top: 90%;
  }
  .btn:hover::before{
    animation: aaa 0.7s 1;
    top: -10%;
    left: -10%;
  }
  @keyframes aaa {
    0%{
      left: -110%;
      top: 90%;
    }50%{
      left: 10%;
      top: -30%;
    }100%{
      top: -10%;
      left: -10%;
    }
  }

Answer 1

改变一下

.btn:hover i{
    transform: scale(1.7);
    color: #f1f1f1;
}

到

.btn:hover i {
  transform: scale(1);
  color: #f1f1f1;
  display:block;
}

Answer 2

我所做的唯一更改是将 :before 的 z-index 添加到 0 以使其向后推，并使字符串位于顶部，使其成为 z-index:1。

我没有图标代码。因此，我无法测试此修复程序对此的影响。但由于字符串是空白的，它会正常工作。

Here 是解决方案

谢谢