How to create different underline colour for my heading text in HTML?

Question

I need to have a single underline below my heading text <h1> tag. But the colour of the underline below text should have a different colour than rest.

Below is the image for my requirement.

What I have tried doing is placing two <div> side by side and setting different border bottom colour. But this is not a best practice to follow.

Please suggest some improvements to my code.

 #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

You can give the parent a bottom border, set the heading to inline-block so it's width is contained to the text size, give the heading a bottom border, then shift the heading down 3px so the borders overlap.

 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

You can give H1 red border and black border to the span inside it. Use padding to fix the alignment of borders.

 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>