2 pixel line different color beside text css

Question

Is a simple exercice, probably some solution better than others, but I wonder which is the best to create this kind of structure in html and css:

What I want is the text, then create 2 pixel line, 1px red and other 1 px green.

enter image description here

Not sure what is the best solution for crossbrowser , want to lines end same time.

Already tried with border, hr , background .. but seems not perfectly finish.

ps-looking for a solution without recurring to a image

If all else fails, you could just use an image for the two lines... — Connor, Jun 27 '12 at 17:26

Joshua · Accepted Answer · 2012-06-27T17:45:28.333

2

Simple answer is to use a simple tag (<i> for example) and apply CSS styles to it.

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

CSS might look like this:

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

edited Jun 27 '12 at 17:45

answered Jun 27 '12 at 17:34

Joshua

3,615
1
26
32

2

Please respect the semantics. Dont use `i` tag for anything else :) Its not very hard to type `span` – Jashwant Jun 27 '12 at 17:39
Seems a pretty solution, still have to check it ... but yes , probably a span should be better http://jsfiddle.net/c4HjQ/2/ Thanks – Ricardo Rodrigues Jun 27 '12 at 17:41
@Jashwant that's a fair point :) I'll point out, though, that lots of commonly used libs, such as Twitter Bootstrap, use tag for special things, such as icons. – Joshua Jun 27 '12 at 17:44
for `i` tag and twitter bootstrap, see my question [here](http://stackoverflow.com/questions/11135261/i-tag-for-icons) – Jashwant Jun 27 '12 at 17:47
@Jashwant Yeah. Nobody will disagree with you, but at the same time nobody follows the spec completely. Did you know that for years, google.com left out the closing body and html tags because it would load faster? – Joshua Jun 27 '12 at 17:52
and `i` tag allows you to load faster ? :O Hack should be used only when you benefit from them ;) – Jashwant Jun 27 '12 at 17:54

score 1 · Answer 2 · answered Jun 27 '12 at 17:32

1

CSS:

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

Markup:

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

answered Jun 27 '12 at 17:32

Jashwant

28,410
16
70
105

If you want to reduce the separation between two lines, you can decrease height and `margin-bottom` will take them to vertical center – Jashwant Jun 27 '12 at 17:33
With `height: 0px` it's more similar to the example he is giving. – Pigueiras Jun 27 '12 at 17:34
Good answer, although "inline-block" fails in IE. You'll need a hack for that. See my answer. – Joshua Jun 27 '12 at 17:38
If `inline-block` fails, you can always use `float` in both the `span`. That will work :) – Jashwant Jun 27 '12 at 17:43
Btw, `inline-block` is supported in ie >=6 for inline elements. Refer [this](http://www.quirksmode.org/css/display.html) – Jashwant Jun 27 '12 at 17:45

score 1 · Answer 3 · answered Jun 27 '12 at 17:34

1

Here is my 2 cents... similar to Rodolfo but no spacers

http://jsfiddle.net/c4HjQ/

answered Jun 27 '12 at 17:34

Miro

8,402
3
34
72

1

agreed +1 on your solution... and change that i to span ;) – Miro Jun 27 '12 at 17:42

score 0 · Answer 4 · answered Jun 27 '12 at 17:38

0

Use the CSS :after along with 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;
}

Try it: http://jsfiddle.net/wBTqV/

Documentation

CSS :after pseudo-selector on MDN - https://developer.mozilla.org/en/CSS/:after
CSS content property on MDN - https://developer.mozilla.org/en/CSS/content

answered Jun 27 '12 at 17:38

Chris Baker

49,926
12
96
115

Good answer, although not cross-browser (inline-block and :after not supported in older IE's). Also the line itself may be part of the content not just a style, so should be represented in the markup (guessing on that one) – Joshua Jun 27 '12 at 17:41
1) Shim older IE with CSS PIE, 2) use an image so your site looks right in Netscape 2.0. Choices must be made :) Personally, I am not too interested if people on IE6 are not getting the full experience -- Microsoft has release updates as *critical security fixes* for IE6 to upgrade to IE8. If you are using IE6 still, you're literally a security risk for the entire internet and disowned by the very people who made the browser. Expect a second-rate internet experience. Just sayin' :) – Chris Baker Jun 27 '12 at 17:44

score -1 · Answer 5 · answered Jun 27 '12 at 17:28

-1

you probably have a 'spacer' image (1x1 transparent image), so you can just do a

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

answered Jun 27 '12 at 17:28

Rodolfo

4,155
23
38

Um, not floats. Or image spacers. Ugh. – Joshua Jun 27 '12 at 17:29
well, you can do it just with dimensions, but I remember having issues cross-browser, like some browsers not showing backgrounds if they were empty, etc. And he did mention cross-browser option was important. – Rodolfo Jun 27 '12 at 17:30

2 pixel line different color beside text css

5 Answers5