CODEWITHSUNDEEP
htmlcss
Pratyush
Pratyush

Reputation: 535

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

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. Heading Text with different underline colour

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>

Upvotes: 3

Views: 1797

Answers (3)

kashmira gilitwala
kashmira gilitwala

Reputation: 11

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>

Upvotes: 0

AG_
AG_

Reputation: 2699

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>

Upvotes: 2

Michael Coker
Michael Coker

Reputation: 53709

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>

Upvotes: 5

Related Questions