如何在文本下方添加多色邊框

我創建了多色邊框，但此時它出現在右上角，而不是出現在我的文字下方。我希望它像文本下劃線一樣在文本下面。如何在文本下方添加多色邊框

如果我刪除了float：right，它會轉到文本，但會出現在文本的任一側而不是下面。

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>

來源

2017-02-24 user3005003

您可以使用linear-gradient解決您的問題。這是很容易看下面的例子：

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您<h2>設置邊框。您可以在linear-gradient上爲:after的背景定義不同的顏色。

來源

2017-02-24 15:42:02

我假設你已經採取了::前/ ::從這個問題的主意：

他們的解決方案添加了DIV上述多彩色邊界使用這種::僞元素 -

.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/

希望它可以幫助

來源

2017-02-24 15:25:21 Shtut

雖然這可能會在理論上回答這個問題，[**這將是優選的**]（// meta.stackoverflow.com/q/8259）在這裏包括答案的基本部分，並提供參考鏈接。如果鏈接的頁面發生更改，則僅鏈接答案可能會失效 –

@Paulie_D取得點 - 更新答案以更好地解釋解決方案。謝謝！ – Shtut

如何在文本下方添加多色邊框

回答

相關問題