如何用linear-gradient实现下图效果？

Question

如图所示，hr横线左边有个蓝色，但不是渐变到灰色，而是蓝-蓝-灰。请问怎么实现呢？

Answer 1

.example {
  width: 100%;
  height: 20px;
  background: linear-gradient(90deg, blue, blue 50px, grey 50px, grey);
}

https://codepen.io/huangbuyi/...

Answer 2

蓝色的长度这个是根据文字多少个来弄的 不知道你为什么要用hr背景色来弄，搞得复杂化了！直接设置文字容器底部边框就可以了

Answer 3

border-bottom-color: blue