2

Summary

I want to create an element where the date is centered, and on the left and right sides, there should be a line (like <hr>) filling the empty space.

Sample (what I would like to create)

The result that I want

My attempt (code snippet)

I have tried several different approaches to achieve this, but my knowledge is still limited. Could you please explain how I could accomplish my goal?

.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>
Michael M.
  • 10,486
  • 9
  • 18
  • 34
haru
  • 29
  • 2
  • There are a lot of discussions that can help you. Check these for example: https://stackoverflow.com/questions/5214127/css-technique-for-a-horizontal-line-with-words-in-the-middle https://stackoverflow.com/questions/23584120/line-before-and-after-title-over-image – Ivan Beliakov Jun 17 '23 at 17:31

1 Answers1

5

Avoid using old HTML elements, such as <hr>. Instead, use modern solutions like display: grid or display: flex, and pseudo-elements such as ::before and ::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>

More information

display: flex - MDN
gap: 20px - flex/grid property - MDN

::before - MDN
::after - MDN

Michael M.
  • 10,486
  • 9
  • 18
  • 34
Syed Muhammad Ali Raza
  • 340
  • 2
  • 5
  • 1
    Truly a beautiful solution! - You can use the `gap: 20px` property (`.post-date` class) to create spacing between the line and text. This is a setting for containers with flex display. – rozsazoltan Jun 17 '23 at 17:58