개요
- add centered text to the middle of a hr-like line
- centered text with hr-like line on both sides
- div with text over hr line
- hr 스타일 div
<style>
.hrbar{overflow:hidden;text-align:center}
.hrbar>span{position:relative;padding:0 15px}
.hrbar>span:before{right:100%}
.hrbar>span:after{left:100%}
.hrbar>span:before,.hrbar>span:after{position:absolute;top:50%;content:"";width:999em;height:1px;background:#ccc;}
</style>
<div class="hrbar"><span><b>jmnote</b>님이 입장하셨습니다</span></div>
<div class="hrbar"><span style='font-size:2em'>테스트2 <b>두껍게</b></span></div>
<div class="hrbar"><span style='font-size:3em'>테스트3</span></div>