Question

我是CSS的初学者，但我正在尝试在每个标签下创建一个带有“line”的材质设计标题，例如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

只需使用nav ul li a.current-nav{ border-bottom: 1px solid red; }即可完成。

Answer 2

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

2017-06-26

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

Answer 3

试试这个：

<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>
  <div class="line-selected right" style="display: block; left: 322px; right: 0.078px;"></div>
  </nav>
</header>

左右值取决于徽标和<li>的尺寸。您必须为每个事件更改"line-selected right"类的样式。

Tab元素CSS下的Shape（线）

3 个答案: