有没有更简单的方法，初学者可以理解？

Question

我发现这个菜单在底部显示边框，我想学习如何做，但我不知道了解它是如何完成的，有没有更简单的方法可以实现同样的事情？这是URL：https://codepen.io/atomas/pen/zBoEZe?editors=1100

HTML:

<ul>
  <li class="elm selected">Home</li>
  <li class="elm">Services</li>
  <li class="elm">About</li>
  <li class="elm bar">Contact</li>
</ul>

CSS:

$elementsNumber: 4; 
$width: 1/$elementsNumber;


* {
  box-sizing: border-box;
}

ul { 
  position: relative;
  margin: 50px auto;
  width: 80%;
  padding: 0;
  list-style: none;
  color: #000;
  overflow: auto;
  overflow: hidden;

  li {
    float: left;
    padding: 15px;
    font-size: 18px;
    font-family: Roboto;
    font-weight: 700;
    width: percentage($width);
    text-align: center;
    cursor: pointer;
    border-bottom: 4px solid #555;



  }
      .bar:before {
      overflow: hidden;
      content: "";
      position: absolute;
      top: 54px;
      bottom: 0;
      transition: all 0.25s;
      left: 0;
      width: percentage($width);
      height: 4px;
      background: red;
    }


}

@for $i from 1 through $elementsNumber {

    li:nth-child( #{$i} ) {
      &.selected~.bar:before,
      &.elm:hover~.bar:before,      
      &.selected.bar:before,
      &.elm.bar:hover:before
       {
        left: percentage( ( $i - 1 ) * $width );
      }
    }

}

Answer 1

如果您只想在菜单的底部上添加边框，您可以使用 border-bottom:

body, html {
    margin: 0;
    padding: 0;
}
header {
    background-color: #eee;
}
ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    border-bottom: 5px solid #ccc;
}
ul>li {
    display: inline-block;
    padding: 0 15px 0 15px;
    margin-left: -4px;
}
ul>li:first-child {
    margin-left: 0;
}
ul>li>a {
    display: block;
    color: #333;
    text-decoration: none;
    padding: 5px 0 5px 0;
}
ul>li:hover {
    border-bottom: 5px solid #555;
    margin-bottom: -5px
}

<header>
    <nav>
        <ul>
            <li class="active"><a href="#" title="Home">Home</a>
            </li>
            <li><a href="#" title="About">About</a>
            </li>
            <li><a href="#" title="Contact">Contact</a>
            </li>
        </ul>
    </nav>
</header>

Answer 2

* {  box-sizing: border-box;}
ul { 
  padding: 0;
  list-style: none;
  color: #000;
  }
li {
    float: left;
    padding: 15px;
    font-size: 18px;
    font-family: Roboto;
    font-weight: 700;
    text-align: center;
  
    border-bottom: 4px solid #555; 
    transition: all 0.3s;
}
li:hover {
    border-bottom: 4px solid red;
}

<ul>
  <li class="elm selected">Home</li>
  <li class="elm">Services</li>
  <li class="elm">About</li>
  <li class="elm bar">Contact</li>
</ul>

Answer 3

css 不仅仅是在底部添加边框。

您在底部看到的灰色边框是通过以下方式显示的：

li {
    float: left;
    padding: 15px;
    font-size: 18px;
    font-family: Roboto;
    font-weight: 700;
    width: percentage($width);
    text-align: center;
    cursor: pointer;
    ***border-bottom: 4px solid #555***;
  }

但是，css 还添加了一个组件，突出显示悬停在其上的特定 li 元素，使底部边框变为红色。

顶部的宽度属性只是确保每个 li 元素在浏览器中水平 space 相等：

$elementsNumber: 4; 
$width: 1/$elementsNumber;

为了实现与代码笔所示相同的红色悬停，您需要编写一些 css 例如 li:hover 等来模拟相同的效果。

你拥有的 css 肯定比它需要的更复杂，但可以达到预期目的。看看这里的 w3schools link 应该可以帮助您理解悬停属性和 CSS.

中的其他有用属性

希望对您有所帮助！

有没有更简单的方法，初学者可以理解？

Is there an easier way, that would be understandable for beginners?

html

css

menu

hover