Tees Valley Arts has been styling their headers to be centered between lines since before I started volunteering with them.
This styling has been improved and adapted by me over time as I transitioned the site into various using custom child themes.
This current version is for adding lined headings to an Understrap child theme.
Manual
The manual approach allows you to manually make specific headers lined.
This is done simply by adding “line” to the Additional CSS classes when editing a page/post.
To enable this manual styling of headers add the following code into Additional CSS:
h1.line:before,
h1.line:after,
h2.line:before,
h2.line:after,
h3.line:before,
h3.line:after,
h4.line:before,
h4.line:after
{
background-color: #454545;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h1.line:before,
h2.line:before,
h3.line:before,
h4.line:before
{
right: 0.5em;
margin-left: -50%;
}
h1.line:after,
h2.line:after,
h3.line:after,
h4.line:after
{
left: 0.5em;
margin-right: -50%;
}
h1.line,
h2.line,
h3.line,
h4.line
{
overflow: hidden;
text-align: center;
margin-top: 1em;
margin-bottom: 0.5em;
line-height: 1.25em;
}Automatic
The automatic approach allows you to simply make every header of a certain type always be lined.
The obvious downside to the automatic approach is that long titles on small screens can ruin the look of lined headers.
The code shown here specifically applies the lines to both h1 and h2 entry titles since my Understrap child theme lists posts and pages in archives with h2 entry titles.
h1.entry-title:before,
h1.entry-title:after,
h2.entry-title:before,
h2.entry-title:after
{
background-color: #454545;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h1.entry-title:before,
h2.entry-title:before
{
right: 0.5em;
margin-left: -50%;
}
h1.entry-title:after,
h2.entry-title:after
{
left: 0.5em;
margin-right: -50%;
}
h1.entry-title,
h2.entry-title
{
overflow: hidden;
text-align: center;
margin-top: 1em;
margin-bottom: 0.5em;
line-height: 1.25em;
}Hide on mobile
My solution to the problem of lined headers being ruined was automatically hiding lines on smaller screens.
This in combination with my plan to limit the length of future titles to about 24 characters should result in a neater look.
Hiding both manual and automatically applied lines on smaller screens can be accomplished by adding this code to Additional CSS:
/**
* Devices with screens
* below 768px
*/
@media only screen and (max-width: 768px) {
/**
* Remove lines
*/
h1.line:before,
h1.line:after,
h2.line:before,
h2.line:after,
h3.line:before,
h3.line:after,
h4.line:before,
h4.line:after,
h1.entry-title:before,
h1.entry-title:after,
h2.entry-title:before,
h2.entry-title:after
{
content: none;
}
}