 <p>You can accomplish this with ::before and ::after without knowing the width of container or background color, and to achieve greater styling of the line breaks. For example, this can be modified to make double-lines, dotted lines, etc.</p> <p><a href="https://jsfiddle.net/z8jddc0o/1/">JSFiddle</a></p> <p>CSS, and HTML usage:</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.hr-sect { display: flex; flex-basis: 100%; align-items: center; color: rgba(0, 0, 0, 0.35); 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 8px; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="hr-sect"&gt;CATEGORY&lt;/div&gt;</code></pre> </div> </div> </p>