CSS Paragraph Separators

10 November 2023

Turns out it’s actually really easy to have custom paragraph separators in CSS just like you’d see in a print book, like this:

All of my blog’s posts are generated from markdown files by Jekyll. To insert a paragraph separator in markdown, it’s just three dashes on their own line.


This inserts an <hr> element into the generated HTML, which by default just looks like a straight horizontal line (boring!) It’s pretty easy to add some custom styling to it via CSS - specifically, we can remove the line by removing the border attribute, then use the content attribute to make whatever characters we want appear in its place1.

hr {
    border: none;

hr::before {
    content: '* * *';	
    display: block;
    text-align: center;

I didn’t like how close together the asterisks were, but adding additional spaces in between the characters like content: '* *' did nothing2. I tried adding some &nbsp characters to the content, but the special characters weren’t being interpreted and the literal string &nbsp simply appeared on the page. Finally, I figured out we can use the escaped unicode value of an nbsp to add space between the characters3.

content: '*\0000a0\0000a0\0000a0\0000a0\0000a0*\0000a0\0000a0\0000a0\0000a0\0000a0*'

And voila!

  1. Credit: stack overflow 

  2. After I wrote this, I realized I might be able to add a white-space: pre rule to the hr::before selector - this should allow the multiple spaces in a row to appear correctly. 

  3. Credit: stack overflow