html - テキストcssの横にある2ピクセルの線の異なる色

Question

単純な演習であり、おそらく他のソリューションよりも優れたソリューションがありますが、html と css でこの種の構造を作成するのに最適なのはどれでしょうか。

私が欲しいのはテキストです。次に、2ピクセルの線、1ピクセルの赤、1ピクセルの緑を作成します。

crossbrowser の最適な解決策がわからない、行を同時に終了したい。

すでに border, hr , background .. で試しましたが、完全に終了していないようです。

ps-画像を繰り返さずに解決策を探す

Answer 1

簡単な答えは、（<i>たとえば）単純なタグを使用してCSSスタイルを適用することです。

<p>Your text <span class="line"></span></p>

CSSは次のようになります。

.line {
    position: relative;
    display: inline-block;
    * display: inline; /* fix for IE bugs */
    * zoom: 1; /* fix for IE bugs */
    height: 1px;
    width: 100px;
    background-color: #f00;
    border-bottom: 1px solid #00f;
    vertical-align: middle;
    margin-bottom: 5px;
}

Answer 2

CSS：

#lines{
    border-bottom: 1px solid red;
    border-top: 1px solid green;
    display: inline-block;
    height: 5px;
    margin-left: 10px;  
    width: 100px;
} 

マークアップ：

<span id='text'>My text</span>
<span id='lines'></span>   

Answer 3

これが私の2セントです...ロドルフォに似ていますが、スペーサーはありません

http://jsfiddle.net/c4HjQ/

Answer 4

CSS:afterを一緒に使用しcontentます：

<div class="container">
    <div class="linetext">Text</div>
</div>

.container {
    padding: 15px;
    border: 4px solid black;
}

.linetext:after {
    content: "";
    display:inline-block;
    width: 50px;
    height:1px;
    border-top: 1px solid green;
    border-bottom: 1px solid red;
    margin-left: 6px;
}

試してみてください：http：//jsfiddle.net/wBTqV/

ドキュメンテーション

• MDNのCSS:after疑似セレクター-https ://developer.mozilla.org/en/CSS/:after
• MDNのCSScontentプロパティ-https ://developer.mozilla.org/en/CSS/content

Answer 5

おそらく「スペーサー」画像（1x1の透明な画像）があるので、

<div style="float:left">Your text</div>
<div style="float:left">
  <div style="background-color:green"><img src="spacer.gif" width="100px" height="1px"></div>
  <div style="background-color:red"><img src="spacer.gif" width="100px" height="1px"></div>
</div>