The section separator element is a very nice feature but unless you create a series of them as a global element (recommended), any design changes require a page-by-page audit if changes are needed to the color or other settings. If you want more control and fewer DOM elements, using CSS is an alternative, especially when working with the title elements. The bonus is that you can still use most of the element features without a problem.

the block elements.

When it comes to CSS, you have to remember that many HTML elements are block-level and act like a box. These boxes spread the width of the parent container and stack on top of each other. The heading tags (h1-h6) are a block-level element use display:block by default. This is the key to creating CSS based dividers. As you can see by adding some basic CSS you can see your block.

I am an H2

Copy to Clipboard

changing the block.

To start on your journey, you have to think about your final destination and what you want the desired outcome to be.

Default h2

Inline block h2

Flexbox h2

Grid h2

As you can see, with the exception of inline-block, the other layouts maintain the full width by default, but that is where the similarities end.

Copy to Clipboard

inline block.

Inline block provides a very simple way to create separators using padding and borders. Unfortunately, these controls are not available in the title element, but can be replicated using nested columns or some simple CSS. The advantage of using nested columns is the ability to use text and title elements tied to dynamic data.

Inline block h2

Inline padding and left border

Inline padding and bottom border

Inline block h2

Inline block h2 with padding and left border and extra text to show multiline

Copy to Clipboard


Flexbox adds a whole new level of capability and while most of this will work using the flexbox specification, there are some nuances to be aware of. The single biggest challenge has to do with sizing and the :before pseudo class. While the flexbox model is applied, since it is before all other elements it won’t grow to the height of other content, so equal height is not a feature of before. Using absolute positioning (not used here) on the :after element may solve this.

flexbox h2

flexbox with padding and left border

flexbox with padding and bottom border

flexbox with animated separator bar (.has-title-bar and .rotator)

flexbox h2 space between


justify-content : center and flex-direction : column h2

Copy to Clipboard


CSS Grid, like flexbox, opens a few new possibilities. I am still pretty new to this so this section is very much a learning opportunity for me and a work in progress.

grid h2

grid with padding and left border

grid with padding and bottom border

grid example

grid with padding

Copy to Clipboard