Using the before and after pseudo classes are popular methods for enhancing the beauty of a site. One of the methods I’ve seen (and like) a good deal is using lines to break things up.
In this case, I wanted to use a line before and after a title so I googled it and then played with the idea. I ended up using (like I normally do) my child theme css and a custom class. I struggled with the padding in mobile so just removed it when the screen size dropped below 980. A better solution would be to drop it on phones, only, and/or fix it so it worked on smaller screens….
I like this effect more than the one I’m doing here, but this one is serviceable…
As always, I use Divi.
Here is a how to video:
And the CSS used:
@media (min-width: 981px) {
.fancy-title h2 {
position: relative;
z-index: 1;
overflow: hidden;
text-align: center;
padding-bottom: 0;
}
.fancy-title h2:before, .fancy-title h2:after {
position: absolute;
top: 49%;
overflow: hidden;
width: 50%;
height: 1px;
content: '\a0';
background-color: #EB2000;
}
.fancy-title h2:before {
margin-left: -50%;
text-align: right;
}
}
Native Texas, Logan Seth Ramirez is a computer science graduate from Trinity University and lives in San Antonio with his wife and four children. Along with being a web hero, he authored The Groom Wore White Socks, sings and songwrites as Logan Seth, and his favorite Spanish word is cacahuates.
Hi Logan, thanks for this, it works great. One question – how can I increase the space between the text and the lines? Right now the lines almost appear as if they’re touching the text and I’d like to give it a little more room. I’m sure this is easy but I only dabble in CSS. Thanks!
Hi, Brian! Looks like you can play with margin-left and right on each pseudo class to create some space.
So on the :before pseudo add/change this line:
margin-left: -54%;
And in the :after pseudo try this:
margin-left: 5%;That worked. Thanks again for your help!
very nice, thank you for sharing!
Hey. thank you for this but how can i add the line color http://prntscr.com/iy34jc
and give spaces on left and right?
Totally missed this comment! I am so sorry! 🙁 You can adjust the margin percentages.
Hi Logan, thanks for the tips, it works really really great! I just want to ask one question, how can I make the lines to be full-width? Sorry for my bad english.
Hmmm…I thought by default it would go the fullwidth of the container the heading is in…are you using a fullwidth section?
Ahh you are right! My mistake! Sorry I didn’t realize I’m not using fullwidth section. Thank you so much for your help!
This feature is exactly what I want, but it doesn’t display on tablet or mobile view. Can you help?
Hi, Judy. Place the CSS outside of the “@media (min-width: 981px)” and it’ll appear everywhere.
Hth!
That worked perfectly! Thank you! This is perfect!
You are welcome!