从中心开始的下划线动画的 CSS 代码更改

Posted 2023-03-06

【中文标题】从中心开始的下划线动画的 CSS 代码更改

【英文标题】：CSS code change for underline animation starting from the center

【发布时间】：2022-01-10 17:03:25

【问题描述】：

我想改变悬停时的菜单下划线效果：“从左到右”（我有的那个）到“从中间到两边”。这是我正在使用的代码：我应该改变什么来做到这一点？

/* Top Menu Underline animation on hover & underlined active link */  

#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before 
 content: "";
 position: absolute;
 z-index: 2;
 left: 20;
 right: 0;

#top-menu li a:before 
 content: "";
 position: absolute;
 z-index: -2;
 left: 20px;
 right: 100%;
 bottom: -8px;

 background: #474747; /*** COLOR OF THE LINE ***/
 height: 2px; /*** THICKNESS OF THE LINE ***/
 -webkit-transition-property: right;
 transition-property: right;
 -webkit-transition-duration: 0.2s;
 transition-duration: 0.2s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;

#top-menu li a:hover 
 opacity: 1 !important;

#top-menu li a:hover:before 
 right: 0;

#top-menu li li a:before 
 bottom: 0%;

非常感谢！

【参考方案1】：

 body 
      font-family: sans-serif;
      padding: 50px;
    

    li 
      color: black;
      display: inline-block;
      font-size: 32px;
      cursor: pointer;
    

    li:after 
      content: '';
      display: flex;
      border-bottom: solid 2px red;
      transform: scaleX(0);
      transition: transform .3s ease-in-out;
    

    li:hover:after 
      transform: scaleX(1);
    

<li>here is your link</li>

【讨论】：

我只需要修改很少的现有代码...即可获得更改。有人能帮我吗？谢谢

有什么线索吗？谢谢

让它与您现有的标记和 css 一起工作可能会很痛苦。如果可能，最好重构标记以适应简化的 css。