html - Make Text Overlap to 1px horizontal line -


i trying put text on horizontal line. want if text length increases line should adjusted according text length. working fine on ie7,8, mozilla. want make work google chrome.

it's working fine except google chrome. here 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 me this. thanks.!

here's understand on question:

you want make text overlap hr element.

if i'm not mistaken on understanding question, answer.

just make content after hr overlap hr.

your new html be:

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

and new css 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 jsfiddle example: jsfiddle example


Comments

Popular posts from this blog

plot - Remove Objects from Legend When You Have Also Used Fit, Matlab -

java - Why does my date parsing return a weird date? -

Need help in packaging app using TideSDK on Windows -