Html I'；我希望我的菜单在激活时有下划线，而不仅仅是悬停。可能吗？（非常规下划线代码）

所以我使用了一些在CodePen上找到的CSS代码，在我的网站菜单上有一个漂亮的下划线，所以它没有使用应用于链接的常规下划线

目前，它设置为下划线时，与轻微的动画效果悬停，但我希望它的下划线时，而不是悬停活动。我尝试过使用多种方法来处理它，但由于它不完全是我的下划线代码，有些部分让我感到困惑

有人能帮忙吗？我道歉，如果它看起来一团糟，我可以抓住其他位的代码，如果需要的话。非常感谢

这是我的密码：

HTML:

<nav>
    <ul>
        <li class="item"><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="faq.html">FAQ</a></li>
        <li><a href="contact.html">Contact</a></li>
    </ul>
</nav>

---

只需创建一个与悬停样式具有相同样式的类

把这个翻过来：

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

为此：

a.active:after {
    width: 100%;
}

然后只需将类添加到

a

：

<li class="item"><a class="active" href="index.html">Home</a></li>

我想，我真的不明白，15px是在“a”中填充的。 你可以在“li”中添加更好的内容。另一个建议使用样式编辑器的开发人员是一个很好的帮助，他指出了可以通过这种方式查看属性的对象

通过这种方式，您可以通过规则的颜色来解释元素从其填充中获取Apair大小

a:link{
文字装饰：无！重要；
}
李娜{
颜色：#fff；
字体大小：14px；
位置：相对位置；
字母间距：2px；
文本转换：大写；
-webkit过渡：所有0.4s易用性；
过渡：所有0.4s缓解；
利润率：15px；
}
a:以后{
内容：“；
位置：绝对位置；
高度：2倍；
背景色：白色；
宽度：0；
左：50%；
底部：0；
-webkit转换：translateX（-50%）；
-ms转换：translateX（-50%）；
转化：translateX（-50%）；
-webkit过渡：0.5s立方贝塞尔（0.68，-0.55,0.265,1.55）全部；
过渡：0.5s立方贝塞尔（0.68，-0.55,0.265,1.55）全部；
}
a:悬停{
颜色：番茄；
}
a:活动：之后{
宽度：100%；
}
正文{背景色：黑色}

您可以将类添加到活动导航项中，然后将该类设置为与悬停相同的样式。这应该可以完成你想做的事情。只需将

a:hover:after

更改为

a.active:after

:active

的寿命非常短：此特殊下划线在

鼠标向下时开始，在
鼠标按下时结束，或者在单击开始后释放单击时结束。如果您在
：hover
上有下划线，您甚至不会注意到
：active
“……但我希望它在活动时加下划线，而不是悬停“这如何解决该问题？非常感谢，现在已将其排序。”。感谢：）
<li class="item"><a class="active" href="index.html">Home</a></li>