テキストの下に複数色の枠線を追加する方法

Question

多色の枠線を作成しましたが、現時点ではテキストの下ではなく右上に表示されます。私はそれがテキストの下線のようにテキストの下にあることを望みます。

フロートを削除した場合は、テキストが表示されますが、下に表示されずにテキストの両側に表示されます。

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>

Answer 1

に役立ちます願っています。それははるかに簡単です、次の例を参照してください。あなたが唯一の境界線を設定するために、あなたの<h2>に:afterが必要

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>

を。 :afterの背景に異なる色をlinear-gradientに定義することができます。

Answer 2

私は、あなたが撮影した::を前に/ ::この質問から発想した後に想定しています

彼らのソリューションは、divの上でマルチカラーのボーダーを追加しましたthis :: after擬似要素を使用する -

.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; 
} 

を変更するの部分から'bottom:0'までは、境界線をdivの下部に置きます。

ここで働いフィドルを参照してください： https://jsfiddle.net/rrupuL99/

は、それはあなたがあなたの問題を解決するためにlinear-gradientを使用することができます