文本下劃線或邊框底部自定義

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

您可以使用不同的方法創建儘可能多的不同風格