将 SVG 在边框底部居中

Question

我正在使用 WordPress 创建一个网站。我的客户需要在 WordPress 中创建类似的设计。在设计上，有博客 post 被分隔符分隔开来。查看屏幕截图，我想创建类似这样的东西：

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

我对如何将边框切成两半并将 SVG 放在中间感到困惑。有人会指导我如何去做吗？需要通过 CSS.

完成

Class 名称：.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;
}

将 SVG 在边框底部居中

Centering an SVG inside the border bottom

css

wordpress

wordpress-theming

Class 名称：.ast-separate-container .ast-article-post