如何使用Flexbox让伪元素线条延伸至容器全宽？

嘿，我完全懂你的需求——就是想让每个链接后面的线条自动填满容器剩余宽度，用Flexbox实现而不是依赖绝对定位，还觉得当前的HTML结构太啰嗦对吧？咱们来调整一下，既能简化结构，又能完美实现动态线条的效果～

首先，先把你的HTML结构简化一下，不需要额外的.line div，用CSS伪元素就能搞定，这样代码更清爽：

<div class="hero-text">
  <h1><a href="#">CURRENT EXHIBITIONS</a></h1>
  <div class="hero-text-bottom">
    <div class="title">
      <h2><a href="#">SPECIAL EVENTS</a></h2>
    </div>
    <div class="additional-links">
      <div class="link-with-line">
        <a href="#" class="hero-small-link">CONTACT</a>
      </div>
      <div class="link-with-line">
        <a href="#" class="hero-small-link">CONTRIBUTE TO THE MUSEUM</a>
      </div>
    </div>
  </div>
</div>

接下来是CSS的关键调整，核心就是利用Flexbox的flex: 1属性让伪元素自动占据剩余空间，同时简化不必要的样式：

.hero-text {
  position: fixed;
  display: flex;
  flex-direction: column;
  bottom: 0;
  left: 0;
  margin-left: 3rem;
  margin-bottom: 3rem;
  font-family: var(--font-primary);
  color: white;
  font-size: 3rem;
}

.hero-text-bottom {
  display: flex;
  align-items: center;
}

.additional-links {
  display: flex;
  flex-direction: column;
  margin-left: 1rem;
  gap: 1rem;
  font-size: 1.25rem;
  width: 50%; /* 保持你原来的宽度设置 */
}

.title {
  width: 75%; /* 保持原有设置 */
}

/* 核心样式：链接容器 */
.link-with-line {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 1rem; /* 用gap代替margin-left，更符合Flexbox逻辑 */
}

/* 用伪元素生成线条，代替原来的.line div */
.link-with-line::after {
  content: '';
  flex: 1; /* 关键！让伪元素自动填满容器剩余宽度 */
  border-top: 1px solid white;
}

.hero-small-link {
  z-index: 1;
  /* 如果你希望链接文本不换行，可以保留white-space: nowrap;
     如果允许换行，删掉这行就行，线条依然会填满剩余空间 */
  white-space: nowrap;
}

为什么原来的方案有问题？ #

你之前用width: 100%给.line设置宽度，但在Flex容器里，这样会让线条试图撑满整个容器宽度，而链接本身也占宽度，就会导致线条被挤到下一行。换成flex: 1就不一样了——它会告诉伪元素：“把容器里剩下的所有空间都占满”，完美适配容器宽度变化。

另外，用伪元素代替额外的.line div，直接简化了HTML结构，不用多余的嵌套，代码更易维护～

这样调整后，线条就会动态跟着容器宽度变化，自动延伸到容器末尾，完全符合你想要的效果啦！

备注：内容来源于stack exchange，提问作者erfergo