html - CSS 分割境界線の色

Question

CSS を使用して要素に分割境界線を適用する方法がわかりません。

私が達成しようとしている効果はこれです：

赤い線と灰色の線が要素幅の % を占めるところ。できれば、単一のクラスを使用してこの効果を要素に適用したいと思います。

編集：コードサンプルを求める人のために：

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

Answer 1

赤いテキストと赤い下線？これにはいくつかの簡単な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

さて、あなたが単一のクラスを使いたいと仮定して、そしてあなたの正確なマークアップを見ずに、これはうまくいくでしょう：

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

そして、CSSは次のようになります。

.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のデモです。

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

わかりました似たようなものを作成しましたが、それは垂直方向に求められましたが、現在はグラデーションの方向を変更して役立つようにしています

デモ( Chromeで動作します。クロスブラウザを知っている人は、自由に編集してください。古いブラウザを使用しているため、テストできません)

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