Request to Create Centered Date Element with Line Borders
I am looking to design an element where the date is positioned at the center, while two horizontal lines fill the empty space on either side.
Ideal Design I Want to Achieve:
My Current Approach and Code Snippet Attempt:
I have experimented with various methods to achieve this layout, but my understanding is limited. Can you provide guidance on how I can successfully implement my desired design?
.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>