文本css旁边的2像素线不同颜色

Question

这是一个简单的练习，可能是一些比其他解决方案更好的解决方案，但我想知道在html和css中创建这种结构的最佳方法是什么：

我想要的是文字，然后创建2像素线，1px红色和其他1 px绿色。

不确定什么是crossbrowser的最佳解决方案，希望行同时结束。

已经尝试过边框，小时，背景..但似乎并不完美。

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美分...类似于Rodolfo但没有垫片

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上的CSS content属性 - https://developer.mozilla.org/en/CSS/content

Answer 5

你可能有一个'spacer'图像（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>