How to Make These Headings?

Hi Annette,

I'm not sure I fully understand your question, do you have an example site?

Hi Ying

Not sure how to explain it other than the dashes shown above are actually solid lines.

The first heading has | solid line | Heading | solid line |
The second has the Heading that has a solid line underneath it.

Heading
__________

Hi there,

Add this CSS

/* Divided H2 Style */
h2.divide {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    grid-column-gap: 20px;
}

h2.divide:before,
h2.divide:after {
    content: '';
    height: 1px;
    width: 100%;
    justify-self: center;
    background-color: #000;
}

/* Underline H2 STYLE */
h2.underline {
    border-bottom: 1px solid #000;
}

Then select the H2 block and in Advanced > Additional CSS Class(es) field add:

for 1: divide
for 2: underline

Note if you're using GenerateBlocks its Headline Block has border styles in the settings. So you can do #2 without the CSS if you wish

Thanks David
I'll give this a go

Let us know how you get on!