在边框底部居中 SVG

Question

我正在使用 WordPress 创建一个网站。我的客户需要在 WordPress 中创建类似的设计。在设计中，有些博客文章由分隔线分隔。检查截图，我想创建类似这样的东西：

https://i.stack.imgur.com/xG4Nr.png

我对如何将边框切成两半并在中心放置一个 SVG 感到困惑。有人会指导我如何做到这一点吗？需要通过 CSS 完成。

类名：.ast-separate-container .ast-article-post

我使用的是 Astra 主题！感谢botivegh帮助我？？？

Answer 1

这里是一个如何实现的示例，只需调整到您自己的类：

<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>

---

编辑

我将在上面留下一般性答案。但这是您需要添加的 css，它可以解决问题。一切都设置为20px。如果你想改变它，你需要调整背景大小，宽度，高度和左侧属性。希望这会有所帮助。

.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;
}