html - 对象之间的文本装饰空间

Question

如何在边框之间留出空间(underline 悬停效果)。并且线条的颜色应该是红色。

a {
  text-decoration: none
}

li {
  display: inline;
}

li:hover {
  text-decoration: underline;
}

<li><a href="">
  abc
</a></li>
<li><a href="">
  def
</a></li>
<li><a href="">
  ggg
</a></li>
<li><a href="">
  hello
</a></li>

Answer 1

改用border-bottom和padding

a {
  text-decoration: none
}
li {
  display: inline-block;
}
li:hover {
  border-bottom: 1px solid red;
  padding-bottom: 10px;
}

<li><a href="">
  abc
</a>
</li>
<li><a href="">
  def
</a>
</li>
<li><a href="">
  ggg
</a>
</li>
<li><a href="">
  hello
</a>
</li>