Horizontal Rule Post Separator on Blog Index Page

Help Customization
1

@help What is the best way to include a horizontal rule (with CSS styling options) between each post on the blog index page?

1 Like
2

Here’s some CSS that should help. You can change the 3em value to whatever you want and get an even amount of spacing between posts. (Also, in case anyone hasn’t seen it before, you can use CSS.horse to play around with this code and instantly see your changes!)

article {
    --vspace: 3em;
}
body#collection #wrapper article, body#subpage #wrapper article article {
    margin-bottom: var(--vspace);
}
body#collection #wrapper article + article, body#subpage #wrapper article article + article {
    border-top: 1px solid #ccc;
    padding-top: var(--vspace);
}
1 Like
3

Great addition! Any way I could reduce it to for example 75% or 50% of the width?

4

I’m very late to the party but you can use markdown for that. Type

---

(3x minus) in the blogpost and it’ll show up as a horizontal rule. You can use CSS to style it:

hr {
}