尝试在之前的帮助下在导航 anchor 的底部显示线，在我尝试了很多来解决我的问题之后但没有解决这个问题。我想在 pasudo 类之后使用 css transform 和 transition 添加底线
<html>
<head>
<style>
body,ul,li,a,nav{
margin: 0;
padding: 0;
}
nav {
background-color: #dadada;
}
.menu-items {
list-style: none;
text-align: center;
}
.menu-items a {
float: left;
text-decoration: none;
padding:10px 10px;
color: #fff;
}
.header-menu li > a::after {
border-color: red;
border-style: solid;
position: absolute;
top: 20%;
left: 0;
width: 50%;
height: 0px;
/*background: rgba(0,0,0,0.1);*/
content: '';
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
transform: translateY(20px);
}
.header-menu li > a:hover::after {
opacity: 1;
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
transform: translateY(1px);
}
.menu-items li {
display: inline-block;
}
</style>
</head>
<body>
<nav class="header-menu">
<ul class="menu-items">
<li><a href="#">Home</a></li>
<li><a href="#">Animal</a></li>
<li><a href="#">Birds</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Address</a></li>
<li><a href="#">News</a></li>
</ul>
</nav>
</body>
</html>
最佳答案
添加position: relative .header-menu li > a 或 .menu-items a
relative This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table--group, table-row, table-column, table-cell, and table-caption elements is undefined.
然后将 .header-menu li > a::after 中的 top: 50%; 更改为 top: 100%;
现场演示
body,
ul,
li,
a,
nav {
margin: 0;
padding: 0;
}
nav {
background-color: #dadada;
}
.menu-items {
list-style: none;
text-align: center;
}
.menu-items a {
float: left;
text-decoration: none;
padding: 10px 10px;
color: #fff;
position: relative/*this will wrap pseudo elements*/
}
.header-menu li > a::after {
border-color: red;
border-style: solid;
position: absolute;
top: 100%; /*because we want it to be at the bottom of the anchor*/
left: 10px; /*10px because anchor has a padding of 10px*/
width: 50%;
height: 0px;
/*background: rgba(0,0,0,0.1);*/
content: '';
opacity: 0;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
-moz-transition: opacity 0.3s, -moz-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
transform: translateY(20px);
}
.header-menu li > a:hover::after {
opacity: 1;
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
transform: translateY(1px);
}
.menu-items li {
display: inline-block;
}<nav class="header-menu">
<ul class="menu-items">
<li><a href="#">Home</a>
</li>
<li><a href="#">Animal</a>
</li>
<li><a href="#">Birds</a>
</li>
<li><a href="#">Sports</a>
</li>
<li><a href="#">Address</a>
</li>
<li><a href="#">News</a>
</li>
</ul>
</nav>关于html - 在 css 中使用伪类后将底线添加到 anchor ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37255358/