求助：用CSS实现单选按钮间绿色连线及区域填充效果

要实现绿色线条连接单选按钮+指定区域填色的效果，不用复杂的grid-template也能搞定，核心思路是用伪元素绘制连线+定位实现区域背景填充，下面是具体实现方案：

1. 基础HTML结构（适配需求的典型结构） #

假设你的HTML是类似这样的单选组结构：

<div class="radio-group">
  <div class="radio-item">
    <input type="radio" id="opt1" name="options">
    <label for="opt1">选项1</label>
  </div>
  <div class="radio-item">
    <input type="radio" id="opt2" name="options">
    <label for="opt2">选项2</label>
  </div>
  <div class="radio-item highlighted-area">
    <input type="radio" id="opt3" name="options">
    <label for="opt3">选项3（指定填充区域）</label>
  </div>
  <div class="radio-item">
    <input type="radio" id="opt4" name="options">
    <label for="opt4">选项4</label>
  </div>
</div>

2. 核心CSS实现 #

/* 整体容器：垂直排列，相对定位用于后续背景块定位 */
.radio-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-left: 30px; /* 给连线留出空间 */
  max-width: 400px;
}

/* 单个单选项：相对定位，用于伪元素定位 */
.radio-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 绘制垂直绿色连线：通过伪元素实现 */
.radio-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: -22px; /* 调整到radio左侧的位置 */
  top: 25px;
  width: 2px;
  height: calc(100% + 20px); /* 覆盖到下一个radio的位置 */
  background-color: #2ecc71; /* 绿色线条 */
}

/* 绘制每个radio左侧的绿色圆点（和连线衔接） */
.radio-item::before {
  content: '';
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #2ecc71;
  z-index: 1; /* 确保圆点在连线上方 */
}

/* 指定区域的背景填充 */
.highlighted-area {
  position: relative;
  z-index: 0;
}

.highlighted-area::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -30px;
  right: -10px;
  bottom: -10px;
  background-color: #f0f8f2; /* 自定义填充色 */
  border-radius: 6px;
  z-index: -1; /* 把背景放在内容下方 */
}

/* 可选：美化radio样式 */
input[type="radio"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #2ecc71;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
}

input[type="radio"]:checked {
  background-color: #2ecc71;
}

关键说明 #

• 连线用::after伪元素，给除了最后一个的所有单选项添加垂直线条，通过height: calc(100% + 20px)衔接下一个单选项的圆点；
• 每个单选项左侧的绿色圆点用::before伪元素，确保和线条衔接；
• 指定区域的背景用伪元素实现，通过z-index放在内容下方，避免遮挡文字和radio；
• 整体用flex布局保证垂直排列的整齐性，比grid更适合这种线性结构的需求。

如果你的原始HTML结构和上面的示例有差异，只需要调整伪元素的left/top等值，或者适配你的容器布局即可，不用强行用grid-template导致布局混乱。

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