html - 文本下划线或边框底部自定义

Question

Look at the sample image

你能用css实现这个下划线吗？我尝试按照以下方式进行操作，但我无法继续制作细线，然后在最后再次制作粗线

h1 {
  font-weight: 300;
  display: inline-block;
  padding-bottom: 5px;
  position: relative;
}
h1:before{
    content: "";
    position: absolute;
    width: 25%;
    height: 1px;
    bottom: 0;
    left: 1%;
    border-bottom: 10px solid blue;
      h1 {
      content: "";
      position: absolute;
      width: 50%;
      height: 1px;
      bottom: 0;
      left: 5%;
      border-bottom: 10px solid blue;
  }
}

<h1>test text for show</h1>


<p>Desired final style</p>
<img src="/image/POrU6.png">

Answer 1

细线使用h1的边框，粗端使用伪

请注意，CSS 不允许一个规则嵌套在另一个规则中，就像您在 h1:before 中使用 h1 那样，为此您需要 SCSS 或SASS

h1 {
  font-weight: 300;
  display: inline-block;
  padding-bottom: 5px;
  position: relative;
  border-bottom: 1px solid blue;
}

h1::before,
h1::after {
  content: "";
  position: absolute;
  width: 30%;
  height: 9px;
  bottom: -5px;
  left: 0;
  background: #900;
}
h1::after {
  left: auto;
  right: 0;
}

<h1>test text for show</h1>