菜单项下划线样式的 CSS 代码答案

【问题标题】：CSS code for underline style for menu items菜单项下划线样式的 CSS 代码
【发布时间】：2021-12-14 13:06:15
【问题描述】：

我想知道这个网站菜单项下划线效果的CSS代码：https://www.kevin-missud-charpente.fr/

提前致谢。

【问题讨论】：

与CSS Transitions
@D.Schaller transition 如何从中心开始。

标签： css underline

【解决方案1】：

这里是带有相同下划线动画的 codepen 链接。

https://codepen.io/Nerd/details/zBmAWV

HTML

<nav>
  <a href="#">Hover me!</a>
</nav>

CSS

nav {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

a {
  position: relative;
  color: #000;
  text-decoration: none;
  font-size: 42px;
  font-family: sans-serif;
  &:hover {
    color: #000;
    &:before {
      visibility: visible;
      transform: scaleX(1);
    }
  }
  &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: #000;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
  }
}

【讨论】：

【解决方案2】：

这样更好

body,html {
  margin: 0;
  font: bold 14px/1.4 'Open Sans', arial, sans-serif;
  background: #fff;
}
ul { 
  margin: 150px auto 0; 
  padding: 0; 
  list-style: none; 
  display: table;
  width: 600px;
  text-align: center;
}
li { 
  display: table-cell; 
  position: relative; 
  padding: 15px 0;
}
a {
  color: #000;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.15em;
  
  display: inline-block;
  padding: 15px 20px;
  position: relative;
}
a:after {    
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #000;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
a:hover:after { 
  width: 100%; 
  left: 0; 
}
@media screen and (max-height: 300px) {
    ul {
        margin-top: 40px;
    }
}

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
  <li><a href="#">Support</a></li>
</ul>

这是悬停下划线效果

【讨论】：

很好地使用left: 50%;和left: 0;