居中：边界到容器末端之后？

Question

如何使用普通 css 或 Tailwind 使 :after 边框到达容器的末尾？理想情况下填充剩余的 space，如下图 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

图片2

Answer 1

我给你添加了一些 ligns css:

将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>

居中：边界到容器末端之后？

centering :after border to end of container?

css

flexbox

tailwind-css