css分割线 中间字

CSS分割线中间字是如何实现的呢？

一般情况下，我们可以使用以下代码来生成一条垂直分割线：

    .vertical-line {
      border-left: 1px solid #333;
      height: 50px;
    }
  

其中，.vertical-line 为自定义的 CSS 类名，border-left 属性生成左边框，1px 代表线宽，solid 代表实线，#333 代表颜色值。

当我们需要在分割线中间添加文本时，可以使用伪元素 ::before 和 ::after，如下所示：

    .vertical-line::before {
      content: "";
      display: block;
      border-top: 1px solid #333;
      width: 10px;
      margin: 0 auto;
    }

    .vertical-line::after {
      content: "中间字";
      display: block;
      text-align: center;
      position: relative;
      top: -10px;
      font-size: 12px;
      background: #fff;
      padding: 0 5px;
    }
  

第一段代码中，::before 生成一条水平分割线，content 指定伪元素的内容为空字符串，display: block 使伪元素成为块级元素，border-top 生成上边框，width: 10px 指定伪元素的宽度为 10 像素，margin: 0 auto 居中显示。

第二段代码中，::after 生成一个块级元素，content 指定伪元素的内容为文本 "中间字"，text-align: center 居中显示文本，position: relative 相对定位，top: -10px 上移 10 像素，使文本显示在分割线中间位置，font-size:12px 设置文本字号，background: #fff 设置背景色为白色，padding: 0 5px 设置内边距为 0 上下，5 像素左右。