How to Create Beautiful Article Separator Styles

[Moy]

How to Create Beautiful Article Separator Styles

Effect Demonstration

The Not yet implemented in the image above is a concise and aesthetically pleasing separator, and the text content can be customized.

How it works like:

Implementation Method

Using CSS to beautify the comment text following the separator and simulate a symmetrical separator (the bottom line is actually imitated using border-bottom).

First, write it in this format:

___
%% Separator Text %%

Then apply this CSS:

🎨 CSS Code

Download the newest css: Beautified separator style for Obsidian

Or just copy this:

/* Moy OB Basic Style Adjustments */
/* Created: 2025-04-03 */

/* Make comment text smaller */
.cm-comment {
    font-size: 0.8em;
    opacity: 0.8;
}


/* Beautified separator style */
/* ! Comment after the underline */

/* Real-time editing mode */
.hr + .cm-line:has(.cm-comment) {
    text-align: center;
    padding-top: 0px !important;

    .cm-formatting {
        opacity: 0.0;
    }

    padding-bottom: 0.6em;
    border-bottom: 2px solid var(--hr-color);

    opacity: 1.0;

}

.hr + .cm-line.cm-active:has(.cm-comment) {
    .cm-formatting {
        opacity: 0.8;
    }
}

/* Source code mode, only center text and add underline */
.HyperMD-hr + .cm-comment {
    text-align: center;
    border-bottom: 2px solid var(--hr-color);
}


/* This version uses *emphesis text* after the underline - it could be used in reading view! */

/* Live Editing */
.hr + .cm-line:has(.cm-em) {
    text-align: center;
    padding-top: 0px !important;

    padding-bottom: 0.6em;
    border-bottom: 2px solid var(--hr-color);

    opacity: 1.0;

    .cm-em {
        opacity: 0.6;
    }
}


/* Source Mode */
.HyperMD-hr + .cm-line:has(.cm-em) {
    text-align: center;
    border-bottom: 2px solid var(--hr-color);
}

/* Reading Mode */
.el-hr + .el-p:has(em) {
    text-align: center;
    padding-top: 0px !important;

    p {
        margin-top: 0em;
        opacity: 0.8;
        margin-bottom: 0em;
    }

    margin-top: -1.5em;
    margin-bottom: 0em;
    padding-bottom: 0.4em;
    border-bottom: 2px solid var(--hr-color);

    opacity: 1.0;
}

Note: Only effective in editing mode, as comment text is not rendered in reading mode.

Tips: Using Underscore as Separator Symbol

It is recommended to use the underscore ___ instead of the dash/minus --- as the separator symbol.
Because --- itself is also used as the “title” syntax in Markdown format, and if there is no blank line before it when typing, it will turn the preceding text into a title, resulting in a poor experience.

<!--Will be treated as a title-->
This is text
---

<!--Normal use as a separator-->
This is text
___

For reading mode

Since the reading mode doesn’t render the comment, so I also added a em version:

Like this:

___
*Text*

The benefit is that it can be rendered in all three view modes.
Choose whatever you like :3

[DiCaver]

@Moy

___
%% Separator Text %%

I’m guessing that this example of yours, I should see like that …

… but I see it like that …

Do I need to have some plugin or something else enabled?

Cheers, Marko

[Moy]

Have you enabled the CSS snippet in the post?

[Moy]

Oh, I see!

Apologies for the incorrect CSS earlier. Please try the new version—I’ve updated it in the post.

---

I utilized Dynamic Highlights to add extra CSS classes for comment before.
This updated version is now more universal as it doesn’t rely on any external CSS classes, only the original ones.

[DiCaver]

I have enabled it “globally”:

… and as per the color of %% Seperator Text %% I’m guessing it’s applaying something.

Cheers, Marko

[DiCaver]

Done and dust it! Thanks.

Looks great. I love simple solution and yes - love the “newspaper style” of seperating articles!

Cheers, Marko

[Moy]

Yes, I’m also proud of this implementation—it’s concise, adheres to the native Obsidian Markdown syntax, and doesn’t introduce unnecessary clutter.

Even without this CSS styling, it’s simply a “separator with annotations,” which feels very natural, haha.

(The only downside is that it doesn’t work in reading mode :P)

[DiCaver]

@Moy

text-align: center;

I also needed to put this as !important, but otherwise, it works nicely. And yes, it’s a shame that comments can’t be toggled in Obsidian to show/hide them in Reading mode.

Cheers, Marko

[Moy]

Yay, perhaps some of your theme/CSS settings altered the text alignment.

I’ve just updated another version that uses em text as annotations to ensure compatibility with the reading view.

Now both methods are included—feel free to choose whichever you prefer!