How to Add Simple Line Before or After with Divi

Using the before and after pseudo classes is a very common and useful technique in building beautiful websites; or, at least, modern ones!

A simple technique I like is added ‘small horizontal lines’ before or after headings. (This CSS should work anyway, though.)

CSS USED

.simple-line-break-after:after {
 content: '';
 width: 80px;
 height: 2px;
 display: block;
 background-color: #FF5300;
 margin: 30px auto;
}
.simple-line-break-before:before {
 content: '';
 width: 80px;
 height: 2px;
 display: block;
 background-color: #FF5300;
 margin: 30px auto;
}

Logan Ramirez

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.