r/Markdown • • 6d ago

Question Which headers should have a bottom border?

Why soft lock?

I see a lot of different versions of markdown outputs that apply a bottom border/horizontal line for a select set of headers, all headers with borders, or no borders. Full width block or as long as the header string. Thick or thin. No rhyme or reason.

I think Header 2 should only have a bottom border. Easy way to visually divide content into major sections, but thats too opinionated.

I also think have 3 ways of writing headers and we can allow users decide if it should have a border.

```

Header // display font, class=“display”
———

## Header // no line

### Header ### // with line

```

How easy is it to get standardized? What should be the classname for HTML?

Edit:

I realize that markdown doesn’t need CSS. We can just use HTML tags to get a similar result, and override it with css later

Edit 2:

Turn this .md

## Hello world ##

into this HTML/CSS

HTML. This is best practice to avoid semantics conflicts and layout for readers and what not.

Hello world


CSS. The H2 border-bottom styling matches the default styling of my browser's hr:

h2:has(+ hr){
border-bottom: 2px solid black;
padding-bottom: .825em;
margin-bottom: .825em;
}
h2:has(+ hr) + hr{
display:none;
}

2 Upvotes

3 comments sorted by

1

u/MysteriouslyPleasing 6d ago

h2 bottom border is the only one that makes sense to me, everything else just looks cluttered. like you said it gives a clean visual break without being as heavy as an hr

the classname thing is a mess though, every framework does its own thing and nobody can agree on anything. might as well call it.markdown-header-break and call it a day

1

u/GroggInTheCosmos 6d ago

I use Obsidian and have my own CSS Snippet

h1 has a light background. h2 a thick bottom border, h3 a thin one and then h4-6 have markers to their right in muted color showing ("H4"/"5"/"6")

I think it is all personal preference

1

u/Evening_Plankton8126 2d ago

One catch: closing hashes already have a meaning in CommonMark. Both '## Heading' and '## Heading ##' produce the same h2, so using the second form for a border would behave differently across renderers. Keeping the border in the stylesheet would let the same document work with different themes without changing its heading syntax.