子比美化 - 菜单波浪下划线

一、效果核心亮点

1. 触发场景明确：仅在两种场景下显示波浪下划线，避免导航栏杂乱 ——
   • 菜单处于 “当前选中” 状态（如用户正在浏览 “首页”，则 “首页” 菜单触发效果）；
   • 鼠标悬浮在菜单文字上时（提供实时交互反馈，引导用户操作）。
2. 样式精致自然：波浪线条随文字适配，采用 “从字体继承厚度”（text-decoration-thickness: from-font）的设计，避免线条过粗或过细破坏视觉平衡；下划线与文字间距为 3px（text-underline-offset: 3px），既突出效果又不遮挡文字。
3. 适配性强：通过 “box-decoration-break: clone” 确保波浪线在文字换行（若菜单文字过长）时仍能完整显示，适配不同长度的菜单名称。

二、使用步骤：

1. 复制以下CSS代码到子比主题设置 - 自定义CSS

三、小贴士

• 效果预览：设置完成后，可在前台页面测试 —— 鼠标划过菜单文字，或点击不同菜单切换 “当前选中” 状态，即可看到波浪下划线动态显示。
• 样式调整：若想修改波浪线效果，可微调代码参数（如将 “text-underline-offset: 3px” 改为 “5px” 增加与文字间距，或保留代码结构不变，确保兼容性）。

• 无需复杂插件，仅靠一段轻量 CSS，即可为子比主题导航注入细节美感，提升整体页面的精致度与用户交互体验。