텍스트 아래에 멀티 컬러 테두리 추가 방법

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

도움이되기를 바랍니다.

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>

당신은 국경을 설정하기 위해 <h2>에 :after이 필요합니다 : 그것은 훨씬 쉽게 참조 다음과 같은 예이다. :after의 배경색에 대해 서로 다른 색상을 linear-gradient에 정의 할 수 있습니다.

Answer 2

나는 당신이 :: 전에 찍은 가정/:이 질문에서 아이디어 후 :

가 그들의 솔루션 사업부 위의 멀티 국경을 추가, 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을 사용할 수 있습니다