How to add a multi coloured border underneath text

Question

I have created a multi coloured border but at the moment it appears in the top right instead of underneath my text. I want it to be underneath the text as like the text underline.

If I remove the float:right then it does go to the text, but appears either side of the text instead of underneath.

h1.title-v2.title-center, h2.title-v2.title-center, h3.title-v2.title-center {
    text-align: center;
}

h2.title-v2 {
    color: #555;
    position: relative;
    margin-bottom: 30px;
}

h1, h2, h3, h4, h5, h6 {
    color: #555;
    margin-top: 5px;
    text-shadow: none;
    font-weight: normal;
    font-family: Roboto;
}

h2 {
    font-size: 24px;
    line-height: 33px;
  }
  
  h2.title-v2.title-center:before, [dir=rt1] h2.title-v2.title-center:after {
    border-right: #F4A613 15px solid;
    border-left: #B0c335 15px solid;
}
h2.title-v2:before {
    left: 0;
    width: 45px;
    height: 4px;
    content: " ";
    bottom: -10px;
    float: right;
    background: #007DC5;
}
h2.title-v2.title-center:after, [dir=rt1] h2.title-v2.title-center:before {
    left: 50%;
    border-right: #56144A 15px solid;
    border-left: #C62428 15px solid;
}
h2.title-v2:after {
    left: 0px;
    width: 29px;
    height: 4px;
    content: " ";
    float: right;
    }

<h2 class="title-v2 title-center">News</h2>

score 1 · Answer 1 · edited May 23 '17 at 11:53

1

I assume you've taken the ::before/::after idea from this question: How to create multi-color border in css3

Their solution added a multi-colored border above the div, using this ::after pseudo element-

.yourDiv::after {
  background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%);
  position: absolute; 
  content: '';
  height: 4px;
  right: 0;
  left: 0;
  top: 0;
}

Changing the 'top:0' part to 'bottom:0' will place the border at the bottom of the div instead.

See working fiddle here: https://jsfiddle.net/rrupuL99/

Hope it helps

edited May 23 '17 at 11:53

Community

1
1

answered Feb 24 '17 at 15:25

Shtut

1,397
2
14
28

Whilst this may theoretically answer the question, [**it would be preferable**](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. Link-only answers can become invalid if the linked page changes – Paulie_D Feb 24 '17 at 15:27
@Paulie_D point taken- updated the answer to explain the solution better. thank you! – Shtut Feb 24 '17 at 15:33

Sebastian Brosch · Accepted Answer · 2017-02-24T15:49:18.337

You can use linear-gradient to solve your problem. It is much easier see following example:

h1.title-v2.title-center, h2.title-v2.title-center, h3.title-v2.title-center {
  text-align: center;
}
h2.title-v2 {
  color: #555;
  position: relative;
  margin-bottom: 30px;
}
h1, h2, h3, h4, h5, h6 {
  color: #555;
  margin-top: 5px;
  text-shadow: none;
  font-weight: normal;
  font-family: Roboto;
}
h2 {
  font-size: 24px;
  line-height: 33px;
}
h2:after {
  background:linear-gradient(
    to right, 
    #56144A 0px, #56144A 15px,
    white 15px, white 45px,
    #C62428 45px, #C62428 60px,
    #F4A613 60px, #F4A613 75px,
    #007DC5 75px, #007DC5 120px,
    #B0c335 120px, #B0c335 135px
  );
  height:4px;
  display:block;
  content:"";
  width:135px;
  margin:0 auto;
}

<h2 class="title-v2 title-center">News</h2>

You only need the :after on your <h2> to set the border. You can define the different colors on linear-gradient for the background of the :after.

How to add a multi coloured border underneath text

2 Answers2