如何使用CSS将SVG居中置于截断的底部边框中间，实现博客文章分隔线

你可以直接将以下CSS代码添加到Astra主题后台「外观」-「自定义」-「额外CSS」的输入框中，保存后即可生效：

/* 给文章容器添加相对定位，作为伪元素定位基准 */
.ast-separate-container .ast-article-post {
  position: relative;
  padding-bottom: 45px; /* 预留分隔线区域高度，可自行调整 */
  margin-bottom: 45px; /* 相邻文章间距，可自行调整 */
}
/* 生成两端截断的底部分隔线 */
.ast-separate-container .ast-article-post::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px; /* 分隔线粗细，可自行调整 */
  background: linear-gradient(
    to right,
    #ddd 0%, #ddd 40%, /* 左侧分隔线占比40%，颜色可改 */
    transparent 40%, transparent 60%, /* 中间20%透明区域放置SVG */
    #ddd 60%, #ddd 100% /* 右侧分隔线占比40%，颜色可改 */
  );
}
/* 居中放置中间的SVG图标 */
.ast-separate-container .ast-article-post::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px; /* 垂直偏移量，调整让SVG和分隔线对齐，可自行修改 */
  transform: translateX(-50%);
  width: 22px; /* SVG宽度，可自行调整 */
  height: 22px; /* SVG高度，可自行调整 */
  /* 替换下面的data URI为你需要的SVG代码即可，当前为示例占位SVG */
  background: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 21C11 21 19 17 19 11V6L11 3L3 6V11C3 17 11 21 11 21Z' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  z-index: 2;
}

可调整参数说明 #

• 分隔线颜色、粗细：修改::after伪元素中的height属性和linear-gradient内的色值即可
• 中间缺口大小：调整渐变的百分比数值即可，缺口越大，左右两段分隔线的占比数值越小
• SVG的大小、位置：修改::before伪元素中的width/height和bottom属性即可，如需替换成你需要的SVG，把background里的data URI替换成转码后的SVG代码即可，无需额外上传SVG文件。

内容的提问来源于stack exchange，提问作者Arbab Ali