Help with CSS snippet - underline headings

[DIYerUK]

Hi friends,

I need some help as I finally dip my toe into the murky pool of CSS for the first time.

I have finally found a theme that I like (Atom, for anyone interested), but I would like to ensure heading levels h1, h2, and h3 have an automatic horizontal rule under them, like the example from another theme below.

Can anyone help me with what the CSS snippet would look like for me to make that amendment?

I have searched this forum, and I can only find a reference to removing the line, not adding it. I’m also mindful that I am not using a complete custom CSS theme, but rather tinkering with a theme that I’m already broadly happy with.

Man, CSS has a steep learning curve!

[ariehen]

There are a few different ways to do this; you could try:

.HyperMD-header-1::after, h1,
.HyperMD-header-2::after, h2,
.HyperMD-header-3::after, h3 {
    display: block;
    content: "";
    padding-bottom: 2px;  
    border-bottom: 1px solid gray;
}

or if you want different styling between the heading levels, you could separate them out. e.g.

.HyperMD-header-1::after, h1 {
    display: block;
    content: "";
    padding-bottom: 2px;  
    border-bottom: 2px solid green;
}

.HyperMD-header-2::after, h2 {
    display: block;
    content: "";
    padding-bottom: 2px;  
    border-bottom: 1px dotted orange;
}

...

https://help.obsidian.md/Extending+Obsidian/CSS+snippets

[DIYerUK]

Thank you sooooo much!