如何在导航栏（navbar）左右两侧各添加一条水平分隔线？

可以通过CSS Flex布局结合伪元素实现，无需修改你现有的HTML结构，代码如下：

/* 导航栏容器基础样式 */
#navbar {
  display: flex;
  align-items: center; /* 横线和文字垂直居中对齐 */
  gap: 20px; /* 横线和导航链接之间的间距，可自行调整 */
  padding: 10px 20px;
}

/* 用伪元素生成左右两条横线 */
#navbar::before,
#navbar::after {
  content: "";
  flex: 1; /* 自动填充剩余空间，保证两侧横线等宽 */
  height: 1px; /* 横线粗细，可自行调整 */
  background-color: #666; /* 横线颜色，可自行调整 */
}

/* 导航链接区域样式，可按需调整 */
#navbar-links {
  display: flex;
  gap: 30px; /* 链接之间的间距 */
}

#navbar-links a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

#navbar-links a.active {
  color: #000;
  font-weight: 700;
}

实现逻辑说明：

• 给#navbar开启Flex布局后，::before伪元素、#navbar-links导航区域、::after伪元素会自动排成一行
• 两个伪元素设置flex:1后，会均分导航链接区域以外的剩余宽度，自然形成左右等长的横线效果，可自适应不同屏幕宽度
• 如需调整横线和导航的间距、横线粗细、颜色等效果，直接修改对应注释标注的参数即可

内容的提问来源于stack exchange，提问作者Ruchira Tharanka