html - 我如何控制（悬停）出现边框的长度？

Question

嗨，我正在为我的作品集制作一个网站，需要一些帮助来解决我遇到的样式问题。我将向您展示我的外观，然后跟进我正在尝试复制的模板。

在底部的边框看起来好像不同的文本有一个它们所在的框。如果你明白我的意思。

我的代码如下；

萨斯：

.header{
nav {
    padding: 2rem 30rem;
    background: $blackish;
}        
&__links {
    a {   
        font-size: $font-med;
        margin-right: 6.25rem; 
        border-bottom: 3px solid transparent;
    }
    a:hover {
        color: $boltyellow;
        padding: 1.9rem 0rem;
        border-bottom-color: $boltyellow;
    } 
}
}

html:

<header class = "header">
    <div class="top"></div>
    <nav class = "flex">
        <div class="header__links">
            <a href="#">Home</a>
            <a href="#">Order</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </div>
    </nav>
</header>

标签： htmlcsssass

Answer 1

你可以在伪类之前或之后做

a:after{
  content:'';
  width:0;
  height:3px;
  background: yellow;
  position: absolute;
  bottom:0;
  left:0;
  display: block;
  transition: ease-in-out .5s;
}

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