css - How to make active link underlined (CSS)?
问题描述
I wanted to make a nice underlined menu on website and I found code like below. It's cool animated but can anyone tell me how to make active link underlined to make visitors sure on which page they are?
list-style: none;
}
li {
display: inline-block;
padding: 20px 0 20px;
vertical-align: middle;
}
a:hover, a:focus, a:active {
color: #999;
text-decoration: none;
}
a {
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
text-decoration: none;
transition: color 0.1s, background-color 0.1s;
}
a {
position: relative;
display: block;
padding: 16px 0;
margin: 0 12px;
letter-spacing: 1px;
font-size: 12px;
line-height: 16px;
font-weight: 900;
text-transform: uppercase;
transition: color 0.1s,background-color 0.1s,padding 0.2s ease-in;
color: #000;
}
a::before {
content: '';
display: block;
position: absolute;
bottom: 3px;
left: 0;
height: 3px;
width: 100%;
background-color: #000;
transform-origin: right top;
transform: scale(0, 1);
transition: color 0.1s,transform 0.2s ease-out;
}
a:active::before {
background-color: #000;
}
a:hover::before, a:focus::before {
transform-origin: left top;
transform: scale(1, 1);
}```
解决方案
将一个名为“active”的类添加到您的活动元素中,如下所示:
<li class="active"><a href="index.html">Text</a></li>
然后将其添加到您的 CSS 中:
a.active{
text-decoration: underline;
}
a.active:hover, a.active:focus, a.active:active{
text-decoration: underline;
}
推荐阅读
- javascript - Javascript 检查数组内的属性值是否存在,即对象内的属性值是否存在
- visual-studio - 将多个项目部署到同一个 IIS 网站
- cloud - 扩展 ServiceNow 中的现有表
- c# - 为什么我的 LINQ 查询结果与数据库 SELECT 查询结果不匹配?
- c# - 在 WPF 中相对于其容器绘制对角文本/文本块/标签/控件
- c# - 邮件已发送但未收到
- python - Python读取csv功能
- python - 熊猫重新采样在开始时跳过不完整的组
- javascript - 检查输入数组中的特定输入是否聚焦Jquery
- c# - 简单的喷油器通用注册未解决