[Resolved] header between two lines

[Melissa]

I know this isn’t exactly theme support, but I’m hoping you can help me with displaying my content. I’d like to show a small header between two horizontal lines. Here’s an example:

https://paste.pics/580b40d44a57c2da4acb3f8d989f83a5

Any ideas? Thank you!

[David]

Hi there,

try this. Add this CSS:

.border-heading {
    display: flex;
    justify-content: center;
    align-items: center;
}

.border-heading:before,
.border-heading:after {
    content: '';
    height: 3px; /* Change border thickness */
    background-color: red; /* Change border color */
    flex: 0 0 20%; /* 20% is the border width */
    margin: 0 2em;
}

Then to add a border heading you would use this HTML:

<h2 class="border-heading">My heading with borders</h2>

[Melissa]

Perfect! Thanks!!

[David]

Glad to be of help.

[Author]

Posts