我如何对链接的链接为链接宽度而不是UL动画

我有以下链接悬停动画：

*,
*::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>

在上面的片段中，当我悬停在每个链接上时，下划线会适当地动画。但是，下划线以ul的宽度结束，而不是每个链接本身的宽度(例如，如果我悬停在"家居"链接上，动画下划线将越过" home"本身，一直到达ul的结尾(。我应该如何更改a::after或a:hover::after伪元素的CSS，以便我得到正在寻找的行为？

制作链接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>

只需使用内联块与您的样式

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>

我实际上已经完成了设置，但甚至不想为我的任何链接提供任何额外的下划线。因此，我也使用纯CSS(实际上SCSS(修复了它，但很具体。这是我用来使下划线的CSS(SCSS(仅跨越文本的宽度：

.main-nav {
    background: rgba(103, 128, 159, 1);
    display: block;
    height: 100vh;
    left: 0;
    right: 0;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    padding-top: 5rem;
    overflow-y: hidden;
    position: fixed;
    top: 0;
    /* hide the menu above the screen by default */
    transform: translateX(-100%);
    /* transition adds a little animation when sliding in and out the menu */
    transition: transform 0.2s ease;
    width: 100vw;
    /* needed for me because of my intro box in index.html.
    Otherwise navigation backgrop would be behind the intro box when opened */
    z-index: 10;
    /* so that the nav link underlining from framer motion does not span across the width of the main-nav backdrop */
    & li > a {
        display: block;
        width: 6rem;
    }
    & li:nth-of-type(1) > a {
        width: 3.5rem;
    }
    & li:nth-of-type(2) > a {
        width: 3.5rem;
    }
    & li:nth-of-type(3) > a {
        width: 2.75rem;
    }
    & li:nth-of-type(4) > a {
        width: 4.75rem;
    }
    & li:nth-of-type(5) > a {
        width: 6.5rem;
    }
    & li:nth-of-type(6) > a {
        width: 2.75rem;
    }
}

.main-nav是UL的类。我只是设置了一个任意的初始宽度，然后是特定锚元素的特定宽度。

相关内容

最新更新

热门标签：