Centering an SVG inside the border bottom - css

Question

I am creating a website using WordPress. My client needs a similar design to be created in WordPress. In design, there are blog posts that are separated by a divider. Check the screenshot, I want to create something similar to this:
https://i.stack.imgur.com/xG4Nr.png
I am confused about how to cut a border in two halves and place an SVG in the center. Will someone guide me on how to do that? Need it done via CSS.
Class Name: .ast-separate-container .ast-article-post
I was using Astra theme! Thanks to botivegh for helping me 🤍

Answer 1

here is an example how to achieve this, just adjust to your own classes:
<style>
div.your-container {
width: 100%;
display: inline-block;
position: relative;
}
hr.your-hr {
display: inline-block;
width: calc(50% - 20px);
}
.your-img {
display: inline-block;
background-image: url(https://svgur.com/i/byb.svg);
width: 20px;
height: 20px;
background-size: 20px 20px;
background-position: center center;
}
</style>
<div class="your-container">
<hr class="your-hr" />
<div class="your-img"></div>
<hr class="your-hr" />
</div>
EDIT
I'm leaving the general answer above. But here is the css you need to add and it will do the trick. Everything is set that the image is 20px. If you want to change that, you need to adjust the background-size, width, height and left attributes. Hope this will help.
.ast-separate-container .ast-article-post::after{
content: "";
position: absolute;
bottom: -12px;
z-index: 10;
left: calc(50% - 10px);
background-image: url(https://svgur.com/i/byb.svg);
width: 20px;
height: 20px;
background-size: 20px 20px;
background-position: center center;
}