wordpress实现鼠标悬停下划线动画效果

在使用wordpress主题的时候，有的主题没有鼠标悬停和离开时的动画效果。以下是wordpress实现鼠标悬停的时候下划线动画效果从中间往两边延伸，鼠标悬停到另一个菜单时，移动过程中下划线动画效果为从两边王中间收缩，下划线颜色根据鼠标悬停时的菜单颜色来定的代码，操作步骤是：

外观-->自定义-->额外CSS-->复制代码-->发布

代码内容：

/* 重置链接默认样式 */
a {
    text-decoration: none;
    color: black;
    transition: color 0.3s ease; /* 使颜色变化更平滑 */
}

/* 菜单项样式 */
.menu-item {
    position: relative;
    display: inline-block;
    margin: 0 20px;
}

/* 菜单链接样式 */
.menu-item a {
    display: inline-block;
    position: relative;
    padding-bottom: 10px; /* 增加下划线与文字的距离 */
    color: black;
    transition: color 0.3s ease; /* 使颜色变化更平滑 */
    overflow: hidden; /* 隐藏超出部分 */
}

/* 下划线样式 */
.menu-item a::after {
    content: ''; /* 创建伪元素 */
    position: absolute;
    bottom: 0; /* 放置在元素底部 */
    left: 50%; /* 初始位置在元素的中间 */
    width: 0; /* 初始宽度为0 */
    height: 2px; /* 下划线高度 */
    background-color: currentColor; /* 下划线颜色跟随文字颜色 */
    transition: width 0.3s ease, left 0.3s ease; /* 动画效果 */
}

/* 鼠标悬停时的样式 */
.menu-item a:hover {
    color: #add8e6; /* 鼠标悬停时的文字颜色 */
}

.menu-item a:hover::after {
    left: 0; /* 鼠标悬停时下划线左边界延伸到元素左边 */
    width: 100%; /* 鼠标悬停时下划线宽度自动填充 */
}

.menu-item a:not(:hover)::after {
    width: 0; /* 鼠标离开时下划线宽度变为0 */
    left: 50%; /* 鼠标离开时下划线回到中间 */
}