当我在文字和下划线之间给出空格时。文字和下划线的长度不相等为什么？

Question

我想在文本和下划线之间留出空间而我做了但是问题是文本和下划线的长度不等于为什么？请帮忙

a { /*Here is My code @Smart*/ 
  text-decoration:none; 
  color:red; 
  position:relative; 
  transition: all .2s ease-in 
 } 
a:hover { 
 position:relative; 
 border-bottom:4px solid red; 
 }

Answer 1

你在寻找这样的东西：

a{
    font-size: 20px;
    text-decoration: none;
    position: relative;
}
a:hover:after  {
    content: "";
    border-bottom: 2px solid #ec6713;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
}

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

输出