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

Question

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

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

不确定 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
• contentMDN 上的CSS属性 - 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>