无法修改HTML结构，如何借助:before伪元素实现带居中文字的边框容器

核心实现逻辑 #

要实现“横向分割线+中心嵌入文字”的效果，核心是不要依赖整条实线做边框，而是通过CSS渐变绘制左右两段断开的水平线，把文字放在断开的区域正中心，同时保证分割线的宽度和下方按钮完全对齐。

注意：不要直接给伪元素设置整条border-top样式，这种写法下实线会完整横跨整个容器宽度，从文字上方穿过，无法实现“线被文字自然打断”的效果。

方案1：伪元素挂载于.btn按钮（布局侵入性最低） #

完全基于现有按钮的尺寸做对齐，不需要调整任何父容器的布局属性：

• 先给原有按钮新增基础定位属性，原有样式全部保留：

  .btn {
    /* 原有样式保留，新增以下属性 */
    position: relative;
    margin-top: 2.5rem; /* 给上方的分割线、文字留出垂直空间 */
  }
  

• 再给按钮的::before伪元素编写样式：

  .btn::before {
    content: "Express checkout";
    /* 把伪元素定位到按钮正上方，宽度和按钮完全一致 */
    position: absolute;
    left: 0;
    bottom: calc(100% + 1rem); /* 距离按钮顶部留1rem的空隙 */
    width: 100%;
    /* 用渐变绘制左右两段分割线，中间留出文字宽度的空白区域 */
    background: linear-gradient(
      to right,
      #d1d5db 0,
      #d1d5db calc(50% - 5rem),
      transparent calc(50% - 5rem),
      transparent calc(50% + 5rem),
      #d1d5db calc(50% + 5rem),
      #d1d5db 100%
    ) no-repeat left center / 100% 1px;
    /* 文字居中样式 */
    text-align: center;
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1;
  }
  

• 优势：伪元素宽度直接参考按钮本身的尺寸，不管父容器是什么布局，分割线都能和按钮完美对齐，文字永远在分割线的几何中心，不会出现偏移。

方案2：伪元素挂载于.div-2容器（适合按钮位置有偏移的场景） #

如果后续按钮有自定义边距，可以把伪元素挂在父容器上，提前统一控制分割线和按钮的对齐关系：

• 先给.div-2设置和按钮匹配的尺寸规则：

  .div-2 {
    position: relative;
    max-width: 400px;
    margin-inline: auto;
    padding-top: 2.5rem; /* 给分割线和文字留垂直空间 */
  }
  

• 再给.div-2::before编写样式，渐变分割线和文字居中逻辑和方案1完全一致：

  .div-2::before {
    content: "Express checkout";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(
      to right,
      #d1d5db 0,
      #d1d5db calc(50% - 5rem),
      transparent calc(50% - 5rem),
      transparent calc(50% + 5rem),
      #d1d5db calc(50% + 5rem),
      #d1d5db 100%
    ) no-repeat left center / 100% 1px;
    text-align: center;
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1;
  }
  

• 优势：可以统一控制分割线和下方内容的垂直间距，不受按钮自身内边距的影响。

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