I want to make the date of the post to be shown like this, but I failed 🙁
Can anyone teach me how to make it?
I also wonder if I have made it too complicated in the CSS…
Here is my HTML code
<div class="post-date">
<hr class="left" />
<p>2023/06/25</p>
<hr class="right" />
</div>
Here is my CSS code
.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;
}
2
Answers
Don’t Use hr left or right Just use before , after
Using your code, it’s like this:
But better "listen" to Syed Muhammad Ali Raza’s answer, instead of mine.