Simple but very nice and easy way to make a text divider.
It's fully responsive and it only requires one Div and 2 pseudo-classes.
And it's all about the flex-grow CSS property.
Source: This great tip from CodyHouse
Add a Section
Add a heading element (or a text element) and change the settings :
Select the pseudo-class :before
Change the background color and change the height you want:
And then, for the most important part, set the Flex Grow to 1
Repeat the same step for the pseudo class :after
And then you will get a simple and a totally responsive Text Divider :
You can just play with the settings, adding some margins, changing the flex-grow, the width, the background colors...