html - 标签元素 CSS 下的形状(线)

Question

我是 CSS 的初学者，但我目前正尝试在每个选项卡下创建一个带有“行”的 Material 设计标题，就像这个 Google 网站上的一样:Our Products | Google

如果可能的话，我还想要切换标签时的动画。

现在我的标题 html 是:

<header>
  [MY LOGO]
  <nav>
    <ul>
        <li><a href="" class="current-nav">tab 1</a></li>
        <li><a href="">tab 2</a></li>
        <li><a href="">tab 3</a></li>
    </ul>
  </nav>
</header>

还有我的 CSS:

header {
    display: table;
    background:#FFF;
    box-shadow: 0 0 8px 0 rgba(0,0,0,.3);
    width:100vw;
    clear: both;
    display: table;
    overflow: hidden;
    white-space: nowrap;
}

nav {
    display: inline-block;
    margin-left: 5vw;
    vertical-align: middle;
}
nav ul {
    display: inline-block;
    margin 0;
    padding: 0;
}
nav li {
    display: inline-block;
    margin-right: 3vw;
}
nav a {
    text-decoration: none;
}
nav a:visited {
    color: inherit;
}
nav a:hover,:active,:focus {
    color: #b82525;
}

如何将形状定位在 .current-nav 选项卡下？

Answer 1

如果您检查链接到的示例，您会看到他们这样做的一种方法是向所选元素添加边框底部。你可以这样做

.current-nav { 
    border-bottom:1px solid #4285f4;
}

他们有另一种技术，就是在下面添加一个元素，但我会把它留给你去调查/逆向工程。