如何将 link 下划线动画化为 link 的宽度，而不是 ul？

Question

我有以下 link 悬停动画：

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}

body {
  font-family: Arial;
  background-color: red;
}

ul {
  list-style-type: none;
  width: 33vw;
  margin: 0;
  padding: 0;
}

li {
  margin: 0 10px;
  padding: 2px;
}

a {
  text-decoration: none;
  color: white;
  font-size: 25px;
}

a::after {
  content: "";
  width: 0;
  height: 2px;
  background-color: white;
  display: block;
  transition: width 0.5s;
}

a:hover::after {
  width: 100%;
}

<!DOCTYPE html>
<html>

<body>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</body>

</html>

在上面的代码片段中，当我将鼠标悬停在每个 link 上时，下划线会正确设置动画。但是，下划线以 ul 的宽度结束，而不是每个 link 本身的宽度（例如，如果我将鼠标悬停在 "Home" link 上，动画下划线会越过单词 "Home" 本身，一直到 ul 的末尾）。我应该如何为 a::after 或 a:hover::after 伪元素更改我的 CSS 以便获得我正在寻找的行为？

Answer 1

制作 link inline-block

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}

body {
  font-family: Arial;
  background-color: red;
}

ul {
  list-style-type: none;
  width: 33vw;
  margin: 0;
  padding: 0;
}

li {
  margin: 0 10px;
  padding: 2px;
}

a {
  text-decoration: none;
  color: white;
  font-size: 25px;
  display: inline-block;
}

a::after {
  content: "";
  width: 0;
  height: 2px;
  background-color: white;
  display: block;
  transition: width 0.5s;
}

a:hover::after {
  width: 100%;
}

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Events</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Answer 2

只需在您的样式中使用内联块

a {
  display: inline-block;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}

body {
  font-family: Arial;
  background-color: red;
}

ul {
  list-style-type: none;
  width: 33vw;
  margin: 0;
  padding: 0;
}

li {
  margin: 0 10px;
  padding: 2px;
}

a {
  text-decoration: none;
  color: white;
  font-size: 25px;
  display: inline-block;
}

a::after {
  content: "";
  width: 0;
  height: 2px;
  background-color: white;
  display: block;
  transition: width 0.5s;
}

a:hover::after {
  width: 100%;
}

<!DOCTYPE html>
<html>

<body>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</body>

</html>

如何将 link 下划线动画化为 link 的宽度，而不是 ul？

How do I animate a link underline to the width of the link, not the ul?

html

css

underline

css-animations