How to Add Simple Line Before or After with Divi

by | Dec 5, 2015 | Divi, Tech Tips, Web Design | 0 comments

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;
}