Как сделать так, чтобы строка внутри кнопки отображалась при наведении курсора на чистый CSS?

Question

Как сделать так, чтобы строка «Контакт» отображалась в моей кнопке при наведении курсора. Все остальные кнопки, которые у меня есть, содержат значки, с которыми я связал свой HTML-файл, используя <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"> в разделе заголовка. Все кнопки со значками при наведении на них отображаются после анимации белым цветом. Но кнопка со строкой «и» между тегами не отображается при наведении курсора? Я не знаю, почему это так, и не знаю, как это исправить.

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

Единственное изменение, которое я сделал, - это добавление z-index к :before в 0, чтобы оно продвинулось вперед и чтобы строка оказалась сверху, сделав это до z-index:1.

У меня не было кода значков. Поэтому я не могу проверить влияние этого исправления на это. Но поскольку строка пуста, она будет работать нормально.

Здесь - это решение

Спасибо