能否实现带有间隔的两种不同颜色的border-bottom效果？

可以实现，下面是两种常用的实现方案：

• 方案一：使用background线性渐变实现，无需额外DOM节点
  代码示例：

  .target-element {
    /* 预留底部边框的空间 */
    padding-bottom: 8px;
    /* 渐变参数依次为：左侧颜色+左侧长度、透明起始位置、透明结束位置、右侧颜色+右侧起始位置 */
    background: linear-gradient(to right, #2385bb 30%, transparent 30%, transparent 32%, #e53935 32%) no-repeat left bottom;
    /* 第二个参数控制边框高度 */
    background-size: 100% 4px;
  }
  

  你可以按需调整百分比数值，修改左右两段边框的长度、中间间隔的宽度，也可以把百分比换成px等固定单位，实现固定长度的边框和间隔。

• 方案二：使用伪元素实现，适合需要单独控制两段边框样式、添加动画的场景
  代码示例：

  .target-element {
    position: relative;
    padding-bottom: 8px;
  }
  /* 左侧边框 */
  .target-element::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30%;
    height: 4px;
    background-color: #2385bb;
  }
  /* 右侧边框 */
  .target-element::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 68%;
    height: 4px;
    background-color: #e53935;
  }
  

  两个伪元素宽度之和小于100%的部分就是中间的间隔，你可以灵活调整宽度和位置参数实现想要的效果。

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