在CSS中使用伪类之后，在锚点上添加底线

Question

尝试在之前，之后的帮助下在导航锚的底部显示行，之后我尝试了很多方法来解决我的问题，但是对此问题没有任何解决方案。 我想在pasudo类之后使用css转换和过渡的帮助添加底线

<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>

Answer 1

添加position: relative对于.header-menu li > a或相对于.menu-items a

relative 该关键字将所有元素布置为好像未放置元素一样，然后调整元素的位置，而不更改布局（因此，如果没有放置元素，将为元素留出空隙）。 position：相对于 table-group，table-row，table-column，table-cell和table-caption元素的影响是不确定的。

然后更改top: 50%; 在.header-menu li > a::after 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>