在伪元素没有按应有的方式显示之后

Question

所以我试图用一个伪元素在悬停时给菜单链接加下划线，但它没有按应有的方式工作。将鼠标悬停在菜单链接上时，after元素会出现，但会贯穿coldiv的整个宽度，而不是仅在链接下方。以下代码：

<div class="container-fluid">
<div class="cover">      
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="logo"><span>CS</span></div>
</div>
<div class="col-md-8">
<nav id="menu" class="menu">
<ul>
<li class="menu-item">
<a class="active" href="#">Link 1</a>
</li>
<li class="menu-item">
<a href="#">Link 2</a>
</li>
<li class="menu-item">
<a href="#">Link 3</a>
</li>
<li class="menu-item">
<a href="#">Link 4</a>
</li>
<li class="menu-item">
<a href="#">Link 5</a>
</li>
</ul>
<ul>
<li class="social-icon"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li class="social-icon"><a href="#"><i class="fab fa-twitter"></i></a></li>
<li class="social-icon"><a href="#"><i class="fab fa-skype"></i></a></li>
<li class="social-icon"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>     
</div>

CSS：

html, body {
margin: 0;
font-family: "Myriad Pro", serif;
}

.slicknav_menu {
display:none;
}
.container-fluid {
padding: 0;
}
.menu {
margin-top: 45px;
}
.cover {
background-image: url("../img/cover.png");
background-size: cover;
height: 100vh;
overflow: auto;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
.menu > ul {
list-style: none;
display: inline;
}
.menu >ul > li {
display: inline-block;

}
.menu-item {
margin-right: 47px;
}
nav ul .menu-item a:after{
position: absolute;
content: '';
height: 2px;
bottom: -15px;
/*margin: 0 auto;*/
left: 0;
right: 0;
width: 0%;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
nav ul .menu-item a:hover:after {
width: 100%;
background: #e50606;
}
/*nav ul li a:after {
position: absolute;
content: '';
height: 2px;
bottom: -15px;
margin: 0 auto;
left: 0;
right: 0;
width: 0%;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
nav ul li a:hover:after {
width: 100%;
background: #e50606;
}*/
.menu > ul > li > a {
text-decoration: none;
color: #fff;
}
.menu ul li a:hover {
color: #11749E;
}
.logo {
position: relative;
margin: 22px 0 0 50px;
width: 67px;
height: 67px;
background-color: #11749e;
-webkit-box-shadow: 12px 8px 0px 0px rgba(255,255,255,0.5);
-moz-box-shadow: 12px 8px 0px 0px rgba(255,255,255,0.5);
box-shadow: 12px 8px 0px 0px rgba(255,255,255,0.5);
}
.logo span {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 30px;
color: #fff;
}
.social-icon {
margin-right: 30px;
}

@media screen and (max-width: 991px) {
/* #menu is the original menu */
#menu {
display:none;
}
.slicknav_menu {
display:block;
}
}

这个css在另一个网站上工作过，找不到为什么现在不工作。

Answer 1

我不知道这是否是您想要的，但我编辑了您的nav部分代码。使:hover在li或.menu-item上而不是在a标签上，并在li上添加position: relative

.menu > ul {
list-style: none;
display: inline;
}
.menu > ul > li {
display: inline-block;
}
.menu-item {
margin-right: 47px;
}
nav ul .menu-item:hover:after {
width: 100%;
background: black;
}
nav ul li:after {
position: absolute;
content: "";
height: 2px;
bottom: 0;
margin: 0 auto;
left: 0;
right: 0;
width: 0%;
-o-transition: 0.5s;
-ms-transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
}
li {
position: relative;
}

<nav id="menu" class="menu">
<ul>
<li class="menu-item">
<a class="active" href="#">Link 1</a>
</li>
<li class="menu-item">
<a href="#">Link 2</a>
</li>
<li class="menu-item">
<a href="#">Link 3</a>
</li>
<li class="menu-item">
<a href="#">Link 4</a>
</li>
<li class="menu-item">
<a href="#">Link 5</a>
</li>
</ul>
</nav>