很难解释，模仿这个链接栏悬停效果

Question

因此，如果您将鼠标悬停在"主页"和"产品"之间，您将看到底部边框出现，并且似乎遵循光标。谁能想到如何将其应用于整个链接栏，以便在将鼠标悬停在这些链接上时边框基本上跟随鼠标？

#linkbar {
width: 54%;
position: absolute;
bottom: 0;
right: 0;
}
.linklist {
list-style-type: none;
margin: 0 auto;
padding: 0;
width: 100%;
display: flex;
}
.linklist li {
font: normal 1.6em 'Nanum Myeongjo', serif;
padding: 0;
width: 100%;
border-right: 1px solid black;
position: relative;
top: 0;
}
.linklist a {
text-decoration: none;
color: black;
display: block;
width: 100%;
margin: 0 auto;
text-align: center;
border-bottom: 1px solid transparent;
transition: border .3s, color .2s;
}
.linklist li:last-child {
border-right: none;
}
.linklist a:hover {
color: maroon;
display: block;
}
.linklist a:after {
content: '';
width: 0px;
height: 1px;
display: block;
background: maroon;
transition: .3s;
position: absolute;
bottom: 0;
}
.linklist a:hover:after {
width: 100%;
}
.home:after {
right: 0;
}

<div id="linkbar">
<ul class="linklist">
<li><a class="home" href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<!--linkbar-->

如果您需要其他任何东西，请告诉我。我感谢你们能提供的任何帮助。我还在学习CSS的原理，我现在才在选择器的表面摸索

Answer 1

我已经编辑了代码。我认为这会对你有所帮助。

#linkbar {
width: 54%;
position: absolute;
bottom: 0;
right: 0;
}
.linklist {
list-style-type: none;
margin: 0 auto;
padding: 0;
width: 100%;
display: flex;
}
.linklist li {
font: normal 1.6em 'Nanum Myeongjo', serif;
padding: 0;
width: 100%;
border-right: 1px solid black;
position: relative;
top: 0;
}
.linklist a {
text-decoration: none;
color: black;
display: block;
width: 100%;
background:transparent;
margin: 0 auto;
text-align: center;
border-bottom: 1px solid transparent;
transition: border .3s, color .2s;
}
.linklist li:last-child {
border-right: none;
}
.linklist a:hover {
color: maroon;
display: block;
}
.linklist a:after {
content: '';
width: 0px;
height: 100%;
display: block;
background: #aaa;
z-index:-1;
transition: .3s;
position: absolute;
bottom: 0;
}
.linklist a:hover:after {
width: 100%;
}
.home:after {
right: 0;
}

<div id="linkbar">
<ul class="linklist">
<li><a class="home" href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<!--linkbar-->