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

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="https://i.stack.imgur.com/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>

Answer 2

例如低于校验

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

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

更多实例在

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

您可以使用不同的方法创建尽可能多的不同风格