如何為HTML中的標題文本創建不同的下划線顏色？

Question

我需要在標題文本<h1>標記下面添加一個下划線。 但是文本下面的下划線顏色應該與其他顏色不同。

以下是我要求的圖片。

我試過做的是並排放置兩個<div>並設置不同的邊框底色。 但這不是最好的做法。

請為我的代碼建議一些改進。

 #left { border-bottom: 3px solid black; float: left } #right { border-bottom: 3px solid red; overflow: hidden; color: transparent; } 

 <div id="container"> <div id="left"> <h1>My Heading</h1> </div> <div id="right"> <h1>Transparent Text</h1> </div> </div> 

Answer 1

您可以為父級指定底部邊框，將標題設置為inline-block ，使其寬度包含在文本大小中，為標題指定底部邊框，然后將標題向下移動3px，使邊框重疊。

 h1 { display: inline-block; margin: 0; border-bottom: 3px solid black; transform: translateY(3px); } div { border-bottom: 3px solid red; } 

 <div> <h1>heading</h1> </div> 

Answer 2

您可以將H1紅色邊框和黑色邊框賦予其內部的span 。 使用填充來修復邊框的對齊方式。

 h1 { border-bottom: 3px solid red; padding:3px 0; } h1 span { border-bottom: 3px solid black; padding:4px 0 } 

  <h1><span>heading</span></h1> 

Answer 3

 h1 { border-bottom: 3px solid red; padding:3px 0; position:relative; } h1:before{ position:absolute; width:100px; height:3px; background:#333; content:""; bottom:-3px; } 

 <h1>heading</h1>