如何通过HTML和CSS让红色圆点始终固定在绿色箭线上？

核心思路是让红色圆点与绿色箭头共享同一个定位容器，通过相对定位+绝对定位的组合，让圆点始终锚定在箭头的末端，避免因文本长度变化或窗口缩放导致的偏移。

步骤1：调整HTML结构 #

将绿色箭头和红色圆点包裹在同一个父容器内，确保两者的位置联动：

<div class="warmup_item">
  <div class="title-arrow-wrapper">
    <h2 class="warmup_title">可随意修改的标题内容</h2>
    <div class="arrow-container">
      <!-- 绿色箭线 + 箭头头部 -->
      <div class="green-arrow-line"></div>
      <div class="green-arrow-head"></div>
      <!-- 红色圆点 -->
      <div class="red-dot"></div>
    </div>
  </div>
</div>

步骤2：修改CSS样式 #

通过flex布局让标题与箭头容器水平对齐，同时用相对定位容器作为圆点的定位参考：

.title-arrow-wrapper {
  display: flex;
  align-items: center;
  gap: 12px; /* 标题和箭头的间距，可按需调整 */
}

.arrow-container {
  position: relative;
  display: flex;
  align-items: center;
}

/* 绿色箭线样式 */
.green-arrow-line {
  width: 70px; /* 箭线长度，可调整 */
  height: 2px;
  background-color: #2ecc71;
}

/* 绿色箭头头部样式 */
.green-arrow-head {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid #2ecc71;
}

/* 红色圆点样式：绝对定位在箭头最末端 */
.red-dot {
  position: absolute;
  right: -4px; /* 微调圆点位置，使其刚好落在箭头头部末端 */
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #e74c3c;
}

为什么这样修改有效？ #

1. title-arrow-wrapper用flex布局，确保标题和箭头容器始终水平居中对齐，不会因标题长度变化导致错位；
2. arrow-container设置为相对定位，为红色圆点提供了固定的定位参考系；
3. 红色圆点通过position: absolute和transform: translateY(-50%)，始终保持在箭头容器的垂直中点和最右端，无论窗口缩放还是标题长度改变，都会跟着箭头同步移动。

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