Archived topic
header between two lines
3 replies · Started by Melissa on April 21, 2019
Viewing posts 1–4 of 4
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!
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>
Perfect! Thanks!!
Glad to be of help.
This archived topic is closed to new replies.
