当我将鼠标悬停在链接上时，我试图在链接下画一条线。像这样的东西：https://codepen.io/tsimenis/pen/BKdENX
所以，我尝试在width: 0%;类上添加.underline，然后在悬停时添加width: 100%;，但它不起作用。我究竟做错了什么？
.underline {
border-bottom: 1px solid;
width: 0%;
float: inherit;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.underline:hover{
width: 100%;
}
<nav id="site-navigation" class="main-navigation">
<div class="menu-primary-menu-bottom-container">
<ul id="primary-menu-bottom" class="menu nav-menu" aria-expanded="false">
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a href="https://salt-nemanjamandic.c9users.io/te-koop/">te koop</a><span class="underline"></span></li>
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="https://salt-nemanjamandic.c9users.io/design/">design</a><span class="underline"></span></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a href="https://salt-nemanjamandic.c9users.io/kijkappartement/">kijkappartement</a><span class="underline"></span></li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="https://salt-nemanjamandic.c9users.io/realisaties/">realisaties</a><span class="underline"></span>
</ul>
</div>
</nav>
答案 0 :(得分：5)
这是一个演示。希望它有所帮助！
在演示中
:after元素作为下划线，将绝对定位在li元素的底部
li {
position: relative;
display: inline-block;
}
li:after {
content: "";
position: absolute;
left:0;
top: 100%;
width: 0;
height: 2px;
background-color: black;
transition: width .3s ease-in-out;
}
li:hover:after {
width: 100%;
}<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
答案 1 :(得分：2)
你应该解决的问题
1 - 因为span是一个带有display的元素：默认为inline，你应该强制它为display:inline-block或阻塞，以便为它使用宽度。
2 - 你的.underline类应该有一个边框颜色..目前只有border-bottom:solid 1px;
3 - li必须悬停而不是.underline，因为它有0宽度并且指针不能悬停它。所以它应该是
li:hover .underline {...}
你可以在这里看到它： https://codepen.io/FaridNaderi/pen/ZyxGEm
希望有所帮助
答案 2 :(得分：1)
OP Codepen非常复杂，在演示2中我有时使用的模式示例。
<span> <a>
:before和:after的选择器是该效果的关键选择器。/* This change made the strikethrough an underline */ span:before, span:after { ... /* from top: 50% */ bottom: 0%; ... /* Alternated background-color several other areas so it matches || the links' colors. */ background: #ff0; } /* Basic <a> styles */ a, a:link, a:visited { /* Original underline removed */ text-decoration: none; color: #fff; } a:hover, a:active { color: #fc0; }
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300);
body {
display: table;
width: 100%;
height: 100vh;
margin: 0;
background: #333;
font-family: 'Roboto Condensed', sans-serif;
font-size: 20px;
font-weight: 300;
letter-spacing: 5px;
text-transform: uppercase;
color: #fff;
}
a,
a:link,
a:visited {
text-decoration: none;
color: #fff;
}
a:hover,
a:active {
color: #fc0;
}
.container {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 600px;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: block;
padding: 0 20px;
}
span {
position: relative;
display: block;
cursor: pointer;
}
span:before,
span:after {
content: '';
position: absolute;
width: 0%;
height: 1px;
bottom: 0%;
margin-top: -0.5px;
background: #ff0;
}
span:before {
left: -2.5px;
}
span:after {
right: 2.5px;
background: #fff;
transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
span:hover:before {
background: #fc0;
width: 100%;
transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
span:hover:after {
background: transparent;
width: 100%;
transition: 0s;
}<nav id="site-navigation" class="main-navigation">
<div class="menu-primary-menu-bottom-container">
<ul id="primary-menu-bottom" class="menu nav-menu" aria-expanded="false">
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><span class="underline"><a href="https://salt-nemanjamandic.c9users.io/te-koop/">te koop</a></span></li>
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><span class="underline"><a href="https://salt-nemanjamandic.c9users.io/design/">design</a></span></li>
<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><span class="underline"><a href="https://salt-nemanjamandic.c9users.io/kijkappartement/">kijkappartement</a></span></li>
<li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><span class="underline"><a href="https://salt-nemanjamandic.c9users.io/realisaties/">realisaties</a> </span></li>
</ul>
</div>
</nav>
@import url('https://fonts.googleapis.com/css?family=Raleway');
html,
body {
width: 100%;
height: 100%;
font: 400 16px/1.2 Raleway;
background: #333;
color: #fff;
}
a,
a:link,
a:visited {
position: relative;
color: #0FF;
font-variant: small-caps;
text-decoration: none;
}
a:hover,
a:active {
color: transparent;
background-color: transparent;
text-shadow: -.25px -.25px 0 #0FF, -.25px .25px 0 #0FF, .25px -.25px 0 #0FF, .25px .25px 0 #0FF;
}
a::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #0FF;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all .5s ease-in-out 0s;
transition: all .5s ease-in-out 0s;
}
a:hover::before,
a:active::before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
b {
color: #fc0;
}
dt,
dd {
font-size: 1.5rem
}
dt {
margin-bottom: 10px;
}<dl>
<dt>The order of link pseudo-classes</dt>
<dd><a href='#'>a:<b>L</b>ink</a></dd>
<dd><a href='#'> <b>o</b> </a></dd>
<dd><a href='#'>a:<b>V</b>isited</a></dd>
<dd><a href='#'> <b>e</b> </a></dd>
<dd style='margin:10px 35px'><a href='#'> <b>🙴</b> </a></dd>
<dd><a href='#'>a:<b>H</b>over</a></dd>
<dd><a href='#'>a:<b>A</b>ctive</a></dd>
<dd><a href='#'> <b>t</b> </a></dd>
<dd><a href='#'> <b>e</b> </a></dd>
</dl>