After the introductory post I’m going to start writing about CSS, even when it’s not my favourite language as I’m always feeling I spend way too much time for things that should be simpler.
Four weeks ago, while I was implementing a CSS design, I faced the problem of centering the heading overlaying a horizontal line and I found this great post by Louis Lazaris.
Unfortunately, none of the solutions there were valid for me as I needed also to have transparent background. So I started to play with the pseudo-elements till I got the solution.
Giving height and background-color to the pseudo elements :before and :after, together with negative margins of the same size than the heading, defined as 50 %, makes the trick, that I think it’s easy to understand seeing it in action on a fiddle.
Besides allowing any kind of background, my solution doesn’t add any extra HTML tag and scales with every size of text.
h1 {
overflow: hidden;
text-align: center;
}
h1:before,
h1:after {
background-color: #000;
content: "";
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h1:before {
right: 0.5em;
margin-left: -50%;
}
h1:after {
left: 0.5em;
margin-right: -50%;
}
this.blog.name is undefined 
Cheers for this, helped me a bunch today 🙂
Thanks Rob! I’m glad it helped you. Cheers, Pablo.
Pablo: have used this twice on HTML that I didn’t have access to but needed to style…this trick saved the day. Many thanks!
For any other lucky souls that found this site, but don’t need their header centered, all you have to do of course is leave out the “text-align: center” in the h1 and play with the width, and the negative left and right margins, of the pseudo elements. Easy peasy!
Hi Matt!
I’m glad it saved your day, hehe.
Cheers, Pablo.
Thanks a lot for this! I’ve been looking all day for a nice clean solution and this worked like a charm.
/cheers
You’re welcome Alex!
I’m glad it worked for you.
Cheers, Pablo.
What if I use this, it’s going to make every single H1 tag on my site like that right? how would I prevent that to just a select or particular set of H1 tags?
You could use a class for those H1 that you want the style to be applied.
How would I do that Please?
would it be like myclass.h1 { } or h1.myclass and if it’s h1.myclass then how can the before and after be applied?
If all the H1 are in the same page you could wrap then in a div like:
<div class="myclass"><h1>One</h1><h1>Two</h1></div>Or if not you can assign the same class to every H1 and the pseudo-elements :before and :after would be applied in the same way:
h1.myclass:before.here is the code I am using: .my h1 {
overflow: hidden;
text-align: center;
font-size: 1.5em !important;
}
.my h1:before,
.my h1:after {
border-top: 1px solid #000;
border-bottom: 1px solid #000;
content: “”;
display: inline-block;
height: .25em; /****space between my lines****/
position: relative;
vertical-align: middle;
width: 50%;
margin-bottom: .15em;
}
.my h1:before {
right: 0.5em;
margin-left: -50%;
}
.my h1:after {
left: 0.5em;
margin-right: -50%;
}
It works on fiddle and codepen, but when I put in my page it doesnt and I can not find out why 😦 it’s very frustrating
Got it to work. THanks for your help!!!
What was the problem?
I am ashamed to say lol…
The line colors matched my background lol! So I simply could not see them. changed the colors and they were there the whole time. 😦
Hahaha, good one. Don’t be worried, it happens a lot, sometimes we don’t see the easiest things 😉
Yes….thank you alot.
Hello Pablo, I’m so glad I found your post because I’ve been pulling my hair out about this!
The only thing that your coding has done is also put lines on the side of my logo on the header. How can I change that to only be in my headline?
Thanks a million,
Sandra
Hi Sandra!
Without seeing your markup I understand you have wrapped your logo with the H1 tag. So I see two possible solutions: you either wrap your logo with a different tag or you use a class selector for those elements that need to be styled.
Cheers, Pablo.
Pingback: vclever digital design & marketing » How to style a heading with horizontal lines either side using CSS
Pingback: How to style a heading with horizontal lines either side using CSS
Pingback: wordpress-846582-3443679.cloudwaysapps.com » How to style a heading with horizontal lines either side using CSS