基于伪选择器实现浮动Div间自适应居中水平分隔线的问题

我来帮你搞定这个需求！要让分隔线精准居中且宽度自适应，我们可以调整伪元素的定位逻辑，结合CSS特性适配动态变化的Div尺寸：

核心思路 #

• 保留父元素相对定位，确保伪元素的定位基准正确
• 让分隔线避开左右两个浮动元素，只占据中间剩余空间
• 通过transform: translateY(-50%)实现精准垂直居中（避免线条自身高度导致的偏移）

修改后的浮动布局代码 #

.a-deal { 
  position: relative; 
  overflow: hidden; /* 防止分隔线超出容器范围 */
}
.deal-hd { 
  float: left; 
  background: #fff; /* 用背景覆盖穿透的分隔线 */
  padding-right: 10px; /* 和分隔线保持间距 */
}
.deal-arw { 
  float: right; 
  padding: 10px; 
  background: grey; 
  background: #fff; /* 同样覆盖分隔线 */
  padding-left: 10px;
}
.a-deal:after { 
  content: ''; 
  border-bottom: solid 1px #d6d6d6; 
  position: absolute; 
  left: 0; 
  top: 50%; 
  width: 100%;
  transform: translateY(-50%);
  z-index: 1;
}
.clearfix:before, .clearfix:after { 
  content: ""; 
  display: table; 
}
.clearfix:after { 
  clear: both; 
}

<div class="a-deal clearfix"> 
  <h2 class="deal-hd">ebay Top Deals</h2> 
  <div class="deal-arw"> 
    <a href="#" class="lt-arw">&#706;</a> 
    <a href="#" class="rt-arw">&#707;</a> 
  </div> 
</div>

关键优化点 #

• 给左右浮动元素添加与容器一致的背景色，覆盖穿透过来的分隔线，只露出中间有效区域
• 用transform: translateY(-50%)替代单纯的top:50%，解决线条自身高度带来的偏移问题
• 给左右元素添加内边距，让文字与分隔线保持合理间距，提升视觉体验

更简洁的Flex布局方案（同样用伪元素实现） #

如果想摆脱clearfix的束缚，用Flex布局能更优雅地实现需求，分隔线会自动适配剩余空间：

.a-deal { 
  display: flex;
  align-items: center; /* 让所有元素垂直居中 */
  gap: 10px; /* 元素间的固定间距 */
}
.deal-hd { 
  white-space: nowrap; /* 防止标题换行 */
}
.deal-arw { 
  padding: 10px; 
  background: grey; 
  margin-left: auto; /* 把箭头容器推到右侧 */
}
.a-deal:after {
  content: '';
  flex: 1; /* 自动填充左右元素的剩余空间 */
  border-bottom: solid 1px #d6d6d6;
}

<div class="a-deal"> 
  <h2 class="deal-hd">ebay Top Deals</h2> 
  <div class="deal-arw"> 
    <a href="#" class="lt-arw">&#706;</a> 
    <a href="#" class="rt-arw">&#707;</a> 
  </div> 
</div>

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