如何让圆形复选框显示在h3元素前方且勾选标记正常？

问题场景 #

我想制作一个带✔️标记的圆形复选框。当设置label的position为absolute时，复选框功能正常，但不在<h3>（任务标题）元素前方；当将label的position改为relative时，圆形位置正确，但勾选标记不显示。需要让复选框显示在h3元素前方且勾选标记正常生效。

解决方案 #

核心问题是勾选标记（label:after）的定位逻辑错误。当label设为relative时，label:after使用relative定位会导致偏移或显示异常，改为absolute定位即可解决，同时通过调整父容器的flex布局确保复选框与标题对齐。

修改后的代码 #

CSS（仅修改关键部分，其余代码保留）

._inline_task {
  display: flex;
  flex-direction: row;
  align-items: center; /* 新增：让子元素垂直居中，确保复选框与h3对齐 */
}

.checkbox-container label {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  cursor: pointer;
  height: 28px;
  left: 0;
  position: relative; /* 保持relative作为after的定位容器 */
  top: 0;
  width: 28px;
}

.checkbox-container label:after {
  border: 2px solid #fff;
  border-top: none;
  border-right: none;
  content: "";
  height: 6px;
  left: 7px;
  opacity: 0;
  position: absolute; /* 改为absolute定位，相对于label容器 */
  top: 8px;
  transform: rotate(-45deg);
  width: 12px;
}

HTML（无需修改）

<div class="_contain_items">
  <h3> Employee Tasks </h3>
  <hr style="border: none;height: 1px;background-color: #333;">

  <div class="_inline_task">

    <div class="checkbox-container">
      <input type="checkbox" id="checkbox" />
      <label for="checkbox"></label>
    </div>

    <h3 class="_title_task"> Title of the task </h3>
    <h3 class="_when"> Tomorrow </h3>

  </div>

  <p class="_lightweighted"> Housekeeping </p>

</div>

关键修改说明 #

1. 给_inline_task添加align-items: center，确保复选框与标题垂直居中对齐，保证视觉上的一致性
2. 将label:after的定位改为absolute，使其相对于relative的label容器定位，避免布局偏移，勾选标记即可正常显示
3. 保持label的relative定位，确保复选框始终在标题前方的正确位置

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