如何使百分比文本精准位于::before伪元素线条之后？

核心问题分析 #

你遇到的错位本质是：响应式布局中，父元素宽度动态变化时，::after百分比文本的定位依赖父宽百分比，而::before灰色线条的长度/位置也是基于父宽的独立值，两者没有绑定关系，单纯用padding-left: %无法让百分比始终精准贴合线条终点。

可行解决方案 #

方案1：Flex弹性布局（最稳定的响应式方案）

通过将列表项设为Flex容器，让文本、线条、百分比自动对齐，线条填充剩余空间，百分比自然紧跟线条后方：

.expertise__content-item {
  display: flex;
  align-items: center;
  gap: 8px; /* 线条与百分比的间距，可按需调整 */
  border-top: 1px solid #000;
  padding: 1rem 0;
}

/* 移除原伪元素的绝对定位 */
.expertise__content-item::before {
  content: '';
  flex: 1; /* 自动填充文本与百分比之间的剩余空间 */
  height: 1px;
  background-color: #ccc;
  margin-left: 1rem; /* 文本与线条的间距，可按需调整 */
}

.expertise__content-item::after {
  content: attr(data-percent); /* 用data属性存储百分比，维护更灵活 */
  white-space: nowrap;
}

对应HTML结构（给每个项添加百分比数据属性）：

<div class="expertise__content-item" data-percent="90%">BRANDING</div>
<div class="expertise__content-item" data-percent="85%">DESIGN</div>
<div class="expertise__content-item" data-percent="95%">DEVELOPMENT</div>

方案2：绝对定位结合calc计算（兼容旧布局）

如果必须保留原伪元素的绝对定位逻辑，用calc()让::after的位置与::before的终点绑定：

.expertise__content-item {
  position: relative;
  border-top: 1px solid #000;
  padding: 1rem 0;
  padding-right: 60px; /* 给百分比预留固定宽度空间 */
}

.expertise__content-item::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 30%; /* 线条起点，相对于父元素 */
  right: 15%; /* 线条终点，相对于父元素 */
  height: 1px;
  background-color: #ccc;
}

.expertise__content-item::after {
  content: '90%';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(100% - 15%); /* 100%减去线条的right值，精准对齐线条终点 */
  white-space: nowrap;
}

方案3：HTML结构调整（最直观的控制方式）

如果允许修改HTML，新增子元素包裹线条和百分比，让两者相对位置永久固定：

<div class="expertise__content-item">
  BRANDING
  <span class="item-meta">
    <span class="line"></span>
    <span class="percent">90%</span>
  </span>
</div>

.expertise__content-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #000;
  padding: 1rem 0;
}

.item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 60%; /* 控制线条的宽度占比 */
}

.line {
  flex: 1;
  height: 1px;
  background-color: #ccc;
}

.percent {
  white-space: nowrap;
}

关键思路总结 #

• 避免用独立的百分比值分别定位两个伪元素，响应式下父宽变化会导致比例错位；
• Flex布局是最省心的响应式对齐方案，让元素自动适配空间；
• 必须用绝对定位时，通过calc()将::after的位置与::before的终点绑定，而非独立计算。

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