使文字重叠到1px水平线

Question

I am trying to put my text on the horizontal line. I want if the text length increases the line should get adjusted according to the text length. which is working fine on IE7,8, Mozilla. I want to make it work for Google Chrome.

It's working fine except Google Chrome. Here is my code:

/*CSS*/
.pageHD{ font-size:30px; color:#369; font-weight:bold; padding:20px 0} .pageHD p{display:block; margin-right:10px}
.title-line{ height:1px; border:0 none; background:#e5e5e5; position: relative; right:0; top:0px} 
<!--HTML-->  
<div class="pageHD"><p class="left">Zones Showcases</p> <hr class="title-line" /></div>

Can anybody help me for this. Thanks.!

Answer 1

Here's what I understand on your question:

You want to make a text overlap a hr element.

If I'm not mistaken on understanding your question, then this would be my answer.

Just make a content after the hr so it would overlap the hr.

Your new HTML would be:

<div class="pageHD"><hr class="title-line" /></div>

And your new CSS would be:

.pageHD {
    font-size:30px;
    color:#369;
    font-weight:bold;
    padding:20px 0
}
.pageHD p {
    display:block;
    margin-right:10px
}
.title-line{
    height:1px;
    border:0 none;
    background:#e5e5e5;
    position: relative;
    right:0;
    top:0px;
    z-index: 0;
}
.title-line:after {
    position: absolute;
    content: 'Zone Showcases';
    bottom: -15px;
    z-index: 1;
}

Here's a jsFiddle Example: jsFiddle Example

Answer 2

this will solve your problem

border-bottom:1px solid #e5e5e5;

Check this fiddle