单击下划线动画

Question

我正在尝试在描述中重新创建动画并查看here。 当链接未被点击时，下划线从右到左动画，下划线在它消失之前从左到右动画。

a {
  color:#00f;
  text-decoration:none;
  display:inline-block;
}
a:after {
  width: 0;
  display:block;
  background:#00f;
  height:3px;
  transition: all .5s ease-in-out;
  content:"";
}
a:hover {
  color:#00f;
}
a:hover:after {
  width:100%;
}

<a href="#">Click first</a>
<a href="#">Click second</a>

Answer 1

1. 在伪元素上使用position。将position: relative添加到a，将position: absolute添加到:after。

2. 使用bottom和right定位伪元素。这意味着该行来自右侧。

3. 在悬停/单击时，添加left属性。这使得线条跨越整个宽度。宽度从左到右从0增加到100%。

当您“撤消”或再次点击时，left会被删除，并且该行会再次从右侧开始，因此宽度会朝该方向减小。

$('a').on('click', function() {
  $('a').not(this).removeClass('underline');
  $(this).toggleClass('underline');
});

a {
  color: #00f;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

a:after {
  width: 0;
  background: #00f;
  height: 3px;
  transition: all .5s ease-in-out;
  content: "";
  position: absolute;
  bottom: -5px;
  right: 0;
}

a.underline:after {
  width: 100%;
  left: 0;
}

a:hover:after {
  width: 100%;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Click first</a>
<a href="#">Click second</a>

Answer 2

也许您只想要一个HTML / CSS解决方案：

＆＃13;

＆＃13;

a {
  color: #00f;
  text-decoration: none;
  display: inline-block;
}

a span:after {
  width: 0;
  display: block;
  background: #00f;
  height: 3px;
  transition: all .5s ease-in-out;
  content: "";
  float: right;
}

a span:focus {
  color: #00f;
}

label:hover {
  cursor: pointer;
}

label input {
  display: none;
}

label input:checked + span:after, label input + span:hover:after  {
  width: 100%;
  float: left;
}

label input:checked + span {
  color: #00f;
}

＆＃13;

<a href="#">
  <label>
    <input type="radio" name="link" />
    <span>
      Click first
    </span>
  </label>
</a>
<a href="#">
  <label>
    <input type="radio" name="link" />
    <span>
      Click second
    </span>
  </label>
</a>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用以下内容。只需使用一个类来设置样式。

$('a').click(function(e){
  $(this).siblings().removeClass('start');
  $(this).toggleClass('start');
  e.preventDefault();
})

a {
  color:#00f;
  text-decoration:none;
  display:inline-block;
}
a:after {
  width: 0;
  display:block;
  background:#00f;
  height:3px;
  transition: all .5s ease-in-out;
  content:"";
  float:right;
}
a:hover {
  color:#00f;
}
a.start:after {
  width: 100%;
}
a:hover:after {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Click first</a>
<a href="#">Click second</a>