html - 如何让文字装饰线线条宽度变短

Question

大家好，我正在想办法让文本装饰线更短，这样它就不会一直延伸下去，我希望它看起来像这样:

#about h1 {
    font-weight: 600;
        font-size: 17px;
        color: #555;
    	text-align: center;
        text-decoration-line: underline;
        text-decoration-style: wavy;
    }

<div id="about">
  <div class="container">
    <h1> GET TO KNOW US </h1>
  </div>
</div>

使用 Bootstrap 3

谢谢

Answer 1

我会使用渐变重新创建它，然后将它放在一个伪元素中，然后您可以轻松调整大小和位置:

h1 {
  font-weight: 600;
  font-size: 17px;
  color: #555;
  text-align: center;
  position: relative;
}

h1:before {
  content: "";
  position: absolute;
  height: 12px;
  top: 100%;
  right:calc(50% - 40px);
  width:80px;
  background: radial-gradient(circle at 50% 100%, transparent 19%, gray 21%, gray 35%, transparent 35%, transparent), radial-gradient(circle at 50% 0%, transparent 19%, gray 21%, gray 34%, transparent 36%, transparent)-116px 0;
  background-size: 16px 16px;
  background-position: -9px 8px, 15px 3px;
}

<h1> GET TO KNOW US </h1>