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 place¹.

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 nothing². 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 characters³.

content: '*\a0\a0\a0\a0\a0*\a0\a0\a0\a0\a0*';

And voila!