CSS:如何使悬停效果中的线条与其中的文字保持一致？

Question

这是我的 modification of someone else's hover effect .所以我不熟悉 btn-2 类的工作。(我不知道使用的语法)

这是我的 CSS 代码:

* {
  box-sizing: inherit;
  transition-property: all;
  transition-duration: .6s;
  transition-timing-function: ease;
}

body {
  background-color: black;
}

a {
  text-decoration: none;
  color: tomato;
  font-size: 50px;
  font-family: 'Oswald', sans-serif;
  }

.container { 

  padding: 1em;
  text-align: center; 
  vertical-align: middle;
}

.btn-2 {
    letter-spacing: 10px;
}

.btn-2:hover,
.btn-2:active {
  letter-spacing: 30px;
}

.btn-2:after,
.btn-2:before {
  
  border: 1px solid rgba(tomato, 0);
  bottom: 2px;
  top: 2px;
  content: " ";
  display: block;
  margin: 0 auto;
  position: relative;
  transition: all 280ms ease-in-out;
  width: 0;
}

.btn-2:hover:after,
.btn-2:hover:before {
  backface-visibility: hidden;
  border-color: tomato;
  transition: width 350ms ease-in-out;
  width: 50%;
}

.btn-2:hover:before {
  bottom: auto;
  top: 0;
  width: 50%;
}

我想在我的导航栏中使用按钮效果。但我有 3 个问题需要解决:

1. 我希望将鼠标悬停在单词上方和下方时出现的线条与单词的宽度相同。
2. 我希望单词相对于直线居中。也就是说，这条线应该从单词的中间点长出来。
3. 台词没有按照文字的方向进行。

我的一些发现，我不知道原因:

1. 当 .comtainer{padding=1em} 超过 5em 时，这两行会更长。
2. 当我在 .container 类中删除 text-align 和 vertical-align 时，悬停线保持居中，但单词位于窗口左侧。

Answer 1

我不确定我对你的理解有多好，但这里是我举的一些例子

a {
  color: #333;
  display: inline-block;
  padding: 15px 0;
  position: relative;
  text-align: center;
  text-decoration: none; 
  transition: all 250ms ease-in-out;
  &:before,
  &:after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 2px;
    background-color: #333;
    transition: all 250ms ease-in-out;
  }
  &:before {
     top:0;
  }
   &:after {
     bottom: 0;
   }
   &:hover {
     letter-spacing: 5px;
     &:before,
     &:after {
       width: 100%;
     }
   }
   //Trick is here
   span {
    &:before {
      content:attr(title);;
      letter-spacing: 5px;
      display:block;
      height:1px;
      color:transparent;
      overflow:hidden;
      visibility:hidden;
      margin-bottom:-1px;
    }
  }
}


<a href="#" class="btn"><span title="Hover Me">Hover Me</span></a>

你可以查看我的例子here