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.

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

Answer 1

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