将鼠标悬停在链接上时绘制带有跨度的行

Question

当我将鼠标悬停在链接上时,我试图在链接下画一条线.像这样的东西: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>

Answer 1

这是一个演示.希望能帮助到你!

在演示中

1. 我将parent设置为相对元素
2. 我: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>

Answer 2

更新

OP Codepen 非常详尽，演示 2 中是我有时使用的模式的示例。

尖端

• 将每<span>一个都包裹起来<a>
• 带有伪元素:before和的选择器:after是实现该效果的关键选择器。

演示 1 的更改

 /* 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;
      }

演示1

 /* 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;
}

演示2

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