[Support request] Create a separator line before or after every h1/h2/h3/ heading?

[priyankeshu]

https://www.thinkovert.com/featured/start-here/
is there a way where automatically insert a line/separator after every h1/h2/h3 heading?

Also,
I am using table of content plugin but it does nt have ordered list option.
any suggestions how to get that?

Best

[Fernando]

Hi Priyankeshu,

You can try adding a CSS like this in Appearance > Customize > Additional CSS:

h1,h2, h2 {
    border-bottom: solid 1px var(--contrast-2);
    padding-bottom: 8px;
}

This will add a bottom border under all h1, h2 and h3 Blocks in your site.

If you want to add it solely to the specific you linked, use this instead:

.postid-26249 h1,.postid-26249 h2, .postid-26249 h2 {
    border-bottom: solid 1px var(--contrast-2);
    padding-bottom: 8px;
}

Hope this helps! 🙂

[priyankeshu]

Hey thanks a tonne! GP support is just awesome

one more query…
can I only show this on certain pages? for example only on posts and not on pages? or specific category?

[David]

Hi there,

for a specific Post you use this CSS that Fernando provided:

.postid-26249 h1,.postid-26249 h2, .postid-26249 h2 {
    border-bottom: solid 1px var(--contrast-2);
    padding-bottom: 8px;
}

For all Single Posts you can do:

.single-post h1,.single-post  h2,.single-post h2 {
    border-bottom: solid 1px var(--contrast-2);
    padding-bottom: 8px;
}

For all Pages you can do:

.page h1,.page h2,.page h2 {
    border-bottom: solid 1px var(--contrast-2);
    padding-bottom: 8px;
}

OR if you want to specify many locations you can do the following:

1. Create a new Hook Element in Appearance > Elements.
2. In the text area add:

<style>
body h1,body h2,body h2 {
    border-bottom: solid 1px var(--contrast-2);
    padding-bottom: 8px;
}
</style>

3. Set the Hook to wp_head
4. Set the Priority to 100
5. Set you Display Rules to the page, post etc. where you want it applied.

[Author]

Posts