如何在登录与注册按钮之间添加垂直分隔竖线

先给按钮容器添加公共前置样式，方便后续元素对齐：

.header-buttons {
  display: flex;
  align-items: center;
}

方案1：CSS伪元素实现（无需修改HTML，最推荐） #

不用改动原有HTML结构，直接给登录按钮添加after伪元素生成分隔线：

.login-btn::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 16px; /* 可根据按钮高度自定义调整 */
  background-color: #999; /* 自定义分隔线颜色 */
  margin: 0 12px; /* 控制分隔线和左右按钮的间距 */
}

方案2：单侧边框实现（代码量最少） #

直接给登录按钮添加右侧边框，或者给注册按钮添加左侧边框作为分隔：

.login-btn {
  border-right: 1px solid #999;
  padding-right: 12px;
  margin-right: 12px;
}

如果不想边框占用按钮自身的可点击区域，可以额外调整按钮的padding和margin数值。 #

方案3：插入额外HTML分隔元素 #

适合需要频繁控制分隔线显隐的场景，先修改HTML结构，在两个按钮中间插入分隔元素：

<div class="header-buttons">
  <button class="btn login-btn">Log In</button>
  <span class="divider"></span>
  <button class="btn signup-btn">Sign Up</button>
</div>

再添加分隔线样式：

.divider {
  width: 1px;
  height: 16px;
  background-color: #999;
  margin: 0 12px;
}

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