SECTION SEPARATORS

The page is to show the kinds of CSS separators that can be added to your site. The separators can be used to add a bit of flare to your designs or to show a division between some content. For the most part they are easy to implement once you get the swing of it. These separators make use of the pseudo elements :before and :after to place the object. The motivation for this comes from a article I saw on Codrops so if you get a chance go check them out.

Some things to know before you begin

Now before you begin you should know that some of these separators produce some over overflow so to counter act that we will need to include some CSS to cover it up. Also the sections in PL5 will need a position of relative or the pseudo elements will place them at the top of the page and that's not where we want them.

Include this CSS and everything else will work as planned.

/* gives the section a relative position  */
section {
position: relative;
}
 
/* catches the overflow from after/before   */
.region-wrap.pl-region-wrap-template.pl-row.no-pad {
    overflow: hidden;
}

Have Fun!!