居中：在边界到容器末端之后？ [复制]答案

【问题标题】：centering :after border to end of container? [duplicate]居中：在边界到容器末端之后？ [复制]
【发布时间】：2021-12-17 10:02:00
【问题描述】：

如何使:after 边框到达容器的末尾使用纯 css 或 Tailwind？理想情况下填充剩余空间，如下图 2 所示。目前，我的宽度是 5rem，flexbox 看起来很理想，但我无法让它工作。

.subheading:after {
  background-color: rgb(194, 188, 178);
  content: "";
  display: inline-block;
  height: 0.25rem;
  position: relative;
  vertical-align: middle;
  width: 5rem;
  align-items: center;
}

.subheading:after {
  margin-left: 20px;
}

<section class="flex">
    <h1 class="subheading">Coronovirus</h1>
</section>

图片1

Image2

【问题讨论】：

标签： css flexbox tailwind-css

【解决方案1】：

我在你的 css 中添加了一些 ligns：

将h1 设置为display:flex 并进行一些对齐调整
添加:after 添加flex: 1 1 auto;

.subheading:after {
  background-color: rgb(194, 188, 178);
  content: "";
  display: inline-block;
  height: 0.25rem;
  position: relative;
  vertical-align: middle;
  width: 5rem;
  align-items: center;
}

.subheading:after {
  margin-left: 20px;
  /* ADDED */
  flex: 1 1 auto;
}

/* ADDED */
h1{
  display:flex;
  align-items:center;
}

<section class="flex">
    <h1 class="subheading">Coronovirus</h1>
</section>

【讨论】：