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.
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
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.
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
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 h2 space between
flexbox
justify-content : center and flex-direction : column h2
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.
