链接点击时如何制作假下划线

Question

我想制作类似下面的内容

  link1   link2   link3 

单击link1时

  link1   link2   link3

  _____

单击link2时

  link1   link2   link3

          _____

我在不同的网站上看到这种情况，但搜索后无法找到。我找到了这个https://medium.com/@dave_lunny/stylish-a-styling-e80c80cbc30e，但想知道我发布的那个是否可以来自链接中的那个。

Answer 1

您可以在添加border-bottom: 1px solid #ccc;课程时使用active，也可以在focus活动时使用{{1}}。

Answer 2

<强>边界底部

一个简单的解决方案是在border-bottom代码上使用<a>。

伪元素

链接中的解决方案使用伪元素。在那里解释;这是解释的结果，只是反向宽度：

＆＃13;

＆＃13;

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

a:before {
    background-color: #0000ee;
    content: '';
    height: 2px;
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    transition: width 0.3s ease-in-out;
    width: 0%;
}

a:hover:before {
    width: 100%;
}

＆＃13;

<a href="http://www.stackoverflow.com">Stackoverflow</a>
<a href="http://www.stackoverflow.com">Stackoverflow</a>
<a href="http://www.stackoverflow.com">Stackoverflow</a>

＆＃13;

＆＃13;

＆＃13;