CODEWITHSUNDEEP
htmlcss
Lance
Lance

Reputation: 257

Is it possible to do create a border-bottom with 2 different colors and a space between them?

enter image description here

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?

Upvotes: 1

Views: 71

Answers (3)

Prasanta Mallick
Prasanta Mallick

Reputation: 46

@font-face {
  font-family: "Arial-Bold";
  src: url(https://www.cufonfonts.com/download/font/single/48880/arial);
}

h2 {
  font-family: "Arial-Bold";
  position: relative;
  display: inline-block;
  color: #1b478d;
  text-transform: uppercase;
}

h2::before {
  position: absolute;
  content: " ";
  width: 74%;
  left: 0;
  bottom: -5px;
  height: 5px;
  background: #1b478d;
}

h2::after {
  position: absolute;
  content: " ";
  width: 24%;
  right: 0;
  bottom: -5px;
  height: 5px;
  background: #e69399;
}
<h2>Contact Us</h2>

Upvotes: 2

Aditya
Aditya

Reputation: 1329

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>

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

Upvotes: 0

Authentic Science
Authentic Science

Reputation: 848

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>

Upvotes: 3

Related Questions