美观的html横向导航条有下划线
时间: 2024-01-11 18:16:23 浏览: 32
您可以使用CSS来设置导航条的下划线。以下是一个示例代码:
HTML代码:
```
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
```
CSS代码:
```
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
nav li a {
display: block;
text-decoration: none;
position: relative;
color: #333;
font-size: 16px;
font-weight: bold;
padding: 10px 15px;
}
nav li a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #333;
transform: scaleX(0);
transition: transform 0.3s ease;
}
nav li a:hover::after {
transform: scaleX(1);
}
```
在上面的代码中,我们使用了flexbox布局来使导航条水平排列,并在每个导航链接上使用了伪元素`::after`来创建下划线。当鼠标悬停在链接上时,我们使用CSS的`transform`属性来动态展示下划线。