I've found out the way to create a border bottom with 2 different colors, but is it possible to have a space between the 2 different colors like the picture shown above?

CodePudding user response：

You will have to tweak the percentages to get the white gap exactly where you want it, but this should get you started.

a {
  font-family: sans-serif;
  font-size: 36px;
  background:
    linear-gradient(
      to right, 
      rgba(0, 83, 124,1) 0%,
      rgba(0, 83, 124,1) 80%,
      rgba(255,255,255,1) 80%,
      rgba(255,255,255,1) 82%,
      rgba(255, 63, 63,1) 82%,
      rgba(255, 63, 63,1) 100%
    ) bottom left no-repeat; 
    padding: 6px 0;
    text-decoration: none;
  background-size: 100% 6px;
  color: rgba(0, 83, 124,1);
}

<a href="">CONTACT US</a>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

h2{
position: relative;
display: inline-block;
}
h2::before {
position:absolute;
content:" ";
width: 74%;
left:0;
bottom:-5px;
height:5px;
background: #000;
}
h2::after {
position:absolute;
content:" ";
width: 24%;
right:0;
bottom:-5px;
height:5px;
background: #f00;

}

<h2>Contact Us</h2>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You Can Achieve That Using CSS's Border Color Property

h2 {
  font-family: sans-serif;
  color: #1b478d;
  text-transform: uppercase;
}

.txt1 {
  border-bottom: 5px solid  #1b478d;
  margin-right: 4px; /* Space You Want between the Word "Contact" and "Us" */
}

.txt2 {
  border-bottom: 5px solid #e69399;
}

<h2>
  <span class="txt1">Contact</span><span class="txt2">Us</span>
</h2>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

The margin-right property in .txt1 is being used for the space between the both word "Contact" and "Us"