可以使用 CSS 的伪元素 ::before 或 ::after 来重新设置菜单项的下划线样式。具体的代码示例如下:
.ant-menu-horizontal > .ant-menu-item::before { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background-color: #1890ff; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }
.ant-menu-horizontal > .ant-menu-item:hover::before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); }
这段代码会将菜单项下方的下划线颜色设置为 #1890ff,鼠标经过时显示下划线。使用伪元素的好处是不会影响到原有的下划线样式,从而避免了被覆盖的问题。