logo标签列表

当悬停在链接上时，使用跨度绘制线条

htmlcss
5
我试图在鼠标悬停在链接上时画一条线。类似这样：https://codepen.io/tsimenis/pen/BKdENX。
因此，我尝试在.underline类上添加width: 0%;，然后在悬停时添加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>
你可以尝试在.underline类中添加display:block，看看是否有效吗？ - Fered
你需要使用所有的样式。你没有使用::before或::after，这是整个效果的关键组成部分。 - zer00ne
3个回答
8

这里是一个演示。希望它有所帮助！

在演示中：

  1. 我将父元素设置为相对定位
  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>

2

需要修复的问题：

1 - span元素默认为display:inline，因此需要将其强制设为display:inline-block或block才能使用宽度属性。

2 - .underline类应该有一个边框颜色...目前只有border-bottom:solid 1px;

3 - li元素必须要添加hover而不是.underline类，因为它宽度为0且指针无法悬停。所以应该是li:hover .underline{...}

在这里可以看到实现效果： https://codepen.io/FaridNaderi/pen/ZyxGEm

希望有所帮助。

2

更新

原始的Codepen非常复杂，Demo 2中展示了我有时使用的一种模式。

提示

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

Demo 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

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

演示 2

@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='#'>&nbsp;&nbsp;&nbsp;<b>o</b>&nbsp;&nbsp;&nbsp;</a></dd>
  <dd><a href='#'>a:<b>V</b>isited</a></dd>
  <dd><a href='#'>&nbsp;&nbsp;&nbsp;<b>e</b>&nbsp;&nbsp;&nbsp;</a></dd>
  <dd style='margin:10px 35px'><a href='#'>&nbsp;&nbsp;&nbsp;<b>&#128628;</b>&nbsp;&nbsp;&nbsp;</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='#'>&nbsp;&nbsp;&nbsp;<b>t</b>&nbsp;&nbsp;&nbsp;</a></dd>
  <dd><a href='#'>&nbsp;&nbsp;&nbsp;<b>e</b>&nbsp;&nbsp;&nbsp;</a></dd>
</dl>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接