Layui导航菜单选中项左侧高亮线由.layui-nav .layui-this::before伪元素实现，修改粗细需用!important覆盖其width属性，如width: 4px !important;。

Layui 导航菜单中，选中项左侧的高亮指示线（即 layui-this 状态下 <li> 左侧那条竖直的蓝色粗线）是由 .layui-nav .layui-this::before 伪元素实现的。它默认宽度为 3px，颜色为 #009688（Layui 主色），位置固定在左侧。

要修改这条线的粗细，只需覆盖其 width 属性即可，但必须注意选择器权重和加载时机。

---

✅ 正确改法：用高权重 CSS 覆盖伪元素

在你的自定义 CSS 文件末尾，或 <style> 标签中（建议放在 </body> 前、layui 加载之后），添加：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

<style>
.layui-nav .layui-this::before {
  width: 4px !important; /* 改成你需要的粗细，如 2px / 5px */
}
</style>

⚠️ 必须加 !important —— 因为 Layui 内置样式也用了 !important，普通声明会被覆盖。

---

? 补充说明

• 这条线是绝对定位的伪元素，不影响布局，只起视觉标识作用；
• 如果你同时想改颜色或圆角，可一并设置：

  .layui-nav .layui-this::before {
    width: 4px !important;
    background-color: #1e9fff !important;
    border-radius: 2px !important;
  }

• 不要试图用 JS 动态修改 ::before 的样式（不可行），必须走 CSS；
• 若使用了 layui-nav-tree（树形导航），它的高亮线逻辑不同（依赖 .layui-nav-tree .layui-this > a::before），需单独覆盖：

  .layui-nav-tree .layui-this > a::before {
    width: 4px !important;
  }

---

❌ 常见错误

• 直接改 .layui-nav .layui-this 的 border-left：无效，因为实际不是用 border 实现的；
• 把样式写在 layui.css 里：不推荐，升级 Layui 会丢失；
• 没加 !important 或选择器不够具体：样式不生效；
• 在 layui.use() 回调里用 JS 插入 style 标签但顺序错乱：确保在 layui 样式加载完毕后执行。

不复杂但容易忽略。