使用 CSS 将文本居中，在空白区域填充分隔线

Question

概括

我想创建一个以日期为中心的元素，并且在左侧和右侧，应该有一条线（如<hr>）填充空白区域。

示例（我想创建的）

我的尝试（代码片段）

我尝试了几种不同的方法来实现这一目标，但我的知识仍然有限。您能解释一下我如何实现我的目标吗？

.post-container .blog-post .post-date hr {
  color: #212931;
  width: 30%;
  vertical-align: middle;
}

.post-date .right {
  position: absolute;
  right: 0;
  top: 0;
  margin-right: 5%;
}

.post-date p {
  font-size: 20px;
  display: inline-block;
  position: absolute;
  transform: translateY(-15px);
  color: #212931;
  margin: 0 auto;
}

<div class="post-date">
  <hr class="left" />
  <p>2023/06/25</p>
  <hr class="right" />
</div>

Answer 1

避免使用旧的 HTML 元素，例如<hr>. 相反，请使用现代解决方案，例如display: gridor display: flex，以及伪元素，例如::beforeand::after

.post-date {
  font-size: 30px;
  display: flex;
  gap: 20px; /* padding between line and text */
  align-items: center;
}

.post-date::before, .post-date::after {
  flex: 1;
  content: '';
  padding: 1px;
  background-color: grey;
  margin: 5px;
}

<div class="post-date">2023/06/25</div>

更多信息

display: flex- MDN
gap: 20px- flex/grid 属性- MDN

::before- MDN
::after- MDN