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

Question

如何在鼠标悬停时在我的按钮中显示字符串“Contact”。我拥有的所有其他按钮都包含图标，我将我的 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;
}