텍스트 좌우로 라인긋기

position 속성이 아닌, 가상선택자와 flex를 이용하는 방법

HTML

<p>Some text<br />in a paragraph.</p>

<div class="hr-sect">CATEGORY</div>

<p>Some more text<br />in a paragraph.</p>

CSS

.hr-sect {display: flex; flex-basis: 100%; align-items: center; color: rgba(0, 0, 0, 0.35); font-size: 12px; margin: 8px 0px;}

.hr-sect::before, .hr-sect::after {content: ""; flex-grow: 1; background: rgba(0, 0, 0, 0.35); height: 1px; font-size: 0px; line-height: 0px; margin: 0px 16px;}

결과

출처 : https://jsfiddle.net/z8jddc0o/1/