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
Post a Comment