CSS 분할 경계선 색

Question

CSS를 사용하여 요소에 분할 경계선을 적용하는 방법을 알아 내는데 어려움이 있습니다.

내가 달성하기 위해 노력하고있어 효과는 이것이다 : 빨간색 라인과 회색 라인이 요소 %를 차지

는 폭. 단일 클래스를 사용하는 요소에이 효과를 적용하고 싶습니다.

편집 : 코드 샘플을 요청하는 사람들을 위해 :

<!-- spans width 100% --> 
<div id="wrapper"> 
    <h1 class="title">DDOS Protection </h1> 
</div> 

Answer 1

빨간색 텍스트와 빨간색 밑줄? 이를위한 간단한 CSS가 있습니다.

<div class="message"> 
    <span>DDOS</span> 
    <span>Protection</span> 
</div> 

을 그리고 당신의 CSS는 다음과 같이 수 :

는

<span style='color:red; border-bottom: 1px solid red;'>DDOS</span> 
<span style='color:#999; border-bottom: 1px solid #999;'>Protection</span> 

Answer 2

음, 그리고 정확한 마크 업을 보지 않고 단일 클래스를 사용하려는 가정이 작동합니다

.message span { 
    border-bottom: 1px solid #ccc; 
    padding-bottom: 5px; 
    color: #ccc; 
} 
    .message span:first-child { 
     border-bottom-color: red; 
     color: red; 
     margin-right: 10px; 
    } 

여기는 jsFiddle demo입니다.

Answer 3

또한 :before와 :after와 재생하려고 할 수 있습니다

.line { 
    background-color: #DDD; 
    padding: 5px 10px; 
    position: relative; 
} 
.line:before, .line:after { 
    content: ''; 
    width: 10%; 
    height: 2px; 
    background-color: red; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 
.line:after { 
    width: 90%; 
    background-color: green; 
    left: 10%; 
} 

http://jsfiddle.net/DHDuw/

Answer 4

가 좋아 나는 비슷한 일을했습니다하지만 수직을 요청했지만, 지금은 너무 기울기 방향을 변경하고 도움이 될 것입니다.

Demo (작품 번호 크롬, 누구든지 크로스 브라우저를 알고 있다면 편집 해 주시기 바랍니다. 그래서

CSS

div { 
    font: 40px Arial; 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0505), color-stop(50%,#ff0000), color-stop(50%,#000000), color-stop(100%,#000000)); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
}