如何使文本装饰线的宽度更短

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>

Answer 2

为其添加span和伪类以获取红色下划线。您可以通过向content:...

添加更多字母来更改宽度

＆＃13;

＆＃13;

#about h1 {
  font-weight: 600;
  font-size: 17px;
  color: #555;
  text-align: center;
  position: relative;
  z-index: 2;
  padding-bottom: 20px;
  background-color:#fff;

}
.underline::before{
  content: " aasd";   
  font-weight: 600;
  font-size: 17px;
  color: red;
  text-align: center;
  text-decoration-line: underline;
  text-decoration-style: wavy;
  display: block;
  position: relative;
  z-index: 1;
  margin: auto;
  margin-top: -29px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;