 <p>You can set a <code>background-color</code> on the <code>:before</code> element instead of a <code>border-top</code> to make it work. The pseudo-element can have a height of just <code>1px</code> and a <code>width: 100px;</code>.</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> p { position: relative; margin: 50px auto; font-size: 1.5em; } p:before { content: ""; position: absolute; top: 50px; width: 100px; margin: 0 auto; height: 1px; background-color: black; /*Removed border, added background-color */ }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt; this is some text &lt;/p&gt;</code></pre> </div> </div> </p>