Help with CSS snippet - underline headings

Custom CSS & Theme Design
2

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

8 Likes