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.

Share This