Code by Day | Explore By Weekend
How To Add Decorative Horizontal Lines Beside Heading Text In Divi Tutorial by Pee Aye Creative

How To Add Decorative Horizontal Lines Beside Heading Text In Divi

This fun and unique tutorial will show you how to add decorative horizontal lines beside heading text in Divi which can be easily customized.

Add A Decorative Line On Both Sides of A Divi Heading

First, add the CSS class “pa-heading-line-both” to any module where you want the lines to appear on the heading.

add lines beside Divi heading text

Adding The Code Snippet

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*center the heading and lines*/

.pa-heading-line-both h2 {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	text-align: center;
}


/*add and adjust the lines*/

.pa-heading-line-both h2:before,
.pa-heading-line-both h2:after {
	content: '';
	border-top: 2px solid;
	margin: 0 20px 0 0;
	flex: 1 0 20px;
	color: #666666;
}


/*add spacing between heading and lines*/

.pa-heading-line-both h2:after {
	margin: 0 0 0 20px;
}

Notice that we are targeting an H2 heading, which is what we used in the video example. You can change this to H1, H3, etc. 

Add A Decorative Line On The Right Side of A Divi Heading

If your text is left aligned, you may want to add a line to the right side of your Divi heading text. I like to do this one, and it works really well. The line will extend to the right as far as the column width. As always, feel free to change the thickness and color of the line, or change the h2 to h1, etc.

First, add the CSS class “pa-heading-line-right” to any module where you want the lines to appear on the heading.

add line to the right of Divi heading text

Adding The Code Snippet

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*align the heading and lines*/

.pa-heading-line-right h2 {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	text-align: center;
}


/*add and adjust the lines*/

.pa-heading-line-right h2:after {
	content: '';
	border-top: 2px solid;
	margin: 0 20px 0 0;
	flex: 1 0 20px;
	color: #666666;
}


/*add spacing between heading and line*/

.pa-heading-line-right h2:after {
	margin: 0 0 0 20px;
}

How To Customize The CSS Heading Lines

There are several ways you can use and customize these snippets to better fit your website. For example, you can change the color, thickness, and width of the lines. We cover these scenarios much better on video, so be sure to watch the video embedded above.

Change the Line Color

You can can easily change the color of the line by replacing the hex color “#666666” with anything you want.

Change The Line Thickness

You can can easily change the thickness of the line by replacing the border-top “2px” value with something else, like “1px,” or maybe “20px.”

You could even make the thickness the same value as the font size!

8

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Recent Posts

Leave A Response!

Subscribe
Notify of
guest
3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Rafa
Rafa
14 days ago

Nice!! You can use a fontawesome icon too!

Thanks

Clay Ravin
Clay Ravin
14 days ago

Nifty!

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

become partners with Pee Aye Creative

Partner With Us

We are looking for you!

Learn More

Divi Tutorials On YouTube

Join over 3,700 others and subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart