CSSを使い、ラインの両端にグラデーションをかけます。
単純な線ではなく、端にいくにつれ徐々にフェードアウトしていく感じがちょっとおしゃれ。
◆HTML
<hr class=”line” />
◆CSS
hr.line {
width: 50%;
margin: 20px 0;
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}
widthやmarginで幅や余白を調整してください。