Question

你能用css实现这个下划线吗？我尝试按照以下方式进行，但我不能提前制作细线，然后在最后再做粗线

＆＃13;

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;
  }
}

＆＃13;

<h1>test text for show</h1>


<p>Desired final style</p>
<img src="https://i.stack.imgur.com/POrU6.png">

＆＃13;

Answer 1

对于细线使用h1的边框，对于粗线使用伪

注意，CSS不允许一个规则嵌套在另一个规则中，就像h1中的h1:before一样，因为你需要SCSS或SASS

＆＃13;

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;
}

＆＃13;

<h1>test text for show</h1>

＆＃13;

Answer 2

检查以下示例

＆＃13;

  .underline-text4{
      position:relative;
      padding-bottom:5px;
      display:inline-block;
      color:blue;
      border-bottom:4px solid blue
  }
.underline-text4::before{
   position: absolute;
   bottom:-7px;
   height:10px;
   width:50px;
   left:0;
   content:"";
  background:red;
}     

.underline-text4::after{
   position: absolute;
       bottom:-7px;
   height:10px;
   width:50px;
   right:0;
   content:"";
   background:red;
}

＆＃13;

<div class="underline-text4"> This is Underlined text 3 </div>

＆＃13;

的更多示例

https://codepen.io/sajiddesigner/pen/QvgeGO

您可以使用不同的方法创建任意数量的不同样式

文字下划线或边框底部自定义

2 个答案: