Bar on the side of the heading

I can't figure this one out. I have a heading (H1) and a colored bar on the right side of the heading. The bar should always cover the area between end of the heading and end of the content area. Something like that:

LOREM IPSUM ================================================

LOREM IPSUM DOLOR SIT AMET =================================

At this point, everything works fine. HTML:

<h1>LOREM IPSUM</h1><hr/>
<div class="clear"></div>
<p>Lorem ipsum dolor sit amet.</p>

and CSS:

h1 { float: left; margin: 0 10px 0 0; font-size: 18px; }
hr { display: block; border-top: 18px solid green; }
.clear { clear: both; }

See jsfiddle

Problem is that this approach doesn't work with multiline heading , it would be perfect to have something like this (so the colored bar appears on the last row):

LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT.

PROIN SAGITTIS DICTUM RISUS A DAPIBUS ========================

Any ideas? :-)

---

What about this approach on jsfiddle

HTML:

<h1><span>LOREM IPSUM<br />TEST</span></h1>
<div class="clear"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris odio magna, rhoncus sed leo et, dapibus adipiscing metus. Donec cursus dignissim ipsum sit amet suscipit.</p>

CSS:

h1 { 
    float: left; 
    margin: 0 10px 0 0; 
    font-size: 18px; 
    display:block; 
    background:green; 
    width:100%;
    padding:0;
}

h1 span {
    background:#FFF;
    padding-right:10px;
    display:inline-block;
}

.clear { clear: both; }

链接地址: http://www.djcxy.com/p/88336.html

上一篇: 除非需要使用CSS，否则避免换行

下一篇: 标题旁边的酒吧