菜单导航底部线条动态效果

代码效果

这段代码用于为菜单项添加下划线效果，当鼠标悬停在菜单项上时，下划线的宽度会发生变化。

底部线条的具体宽度可自己定义。

代码展示

# 放到style.css文件中即可 #

/* 为其他菜单添加下划线 */
.ym-menu>ul>li>a::after {
    content: '';
    display: block;
    /* 将伪元素设置为块级元素，确保它可以设置宽度和高度 */
    width: 0px;
    /* 初始宽度为0，不可见 */
    height: 2px;
    /* 下划线的高度为2像素 */
    border-radius: 5px;
    /* 圆角半径为5像素，使线条两端圆滑 */
    background-color: #0066ff;
    /* 下划线的背景颜色为蓝色 */
    position: absolute;
    /* 使用绝对定位 */
    bottom: 12px;
    /* 距离父元素底部12像素 */
    margin-left: auto;
    margin-right: auto;
    /* 左右自动边距，使下划线居中 */
    left: 0;
    right: 0;
    /* 设置左右边界为0 */
    text-align: center;
    /* 文本居中对齐（对伪元素内容无影响，但保持一致性） */
    transition: width 0.4s ease-in-out;
    /* 添加宽度变化的过渡效果，持续0.4秒，采用ease-in-out过渡函数 */

    transition: all .4s ease-out;
    /* 添加所有属性变化的过渡效果，持续0.4秒，采用ease-out过渡函数 */
}

/* 鼠标悬停时的样式 */
.ym-menu>ul>li>a:hover::after {
    width: 50%;
    /* 鼠标悬停时，下划线的宽度变为50% */

    transition: all .4s ease-out;
    /* 添加所有属性变化的过渡效果，持续0.4秒，采用ease-out过渡函数 */
}