csslayout/contents/separator.md

layout, title, description, keywords

layout	title	description	keywords
layouts/post.njk	Separator	Create a separator with CSS flexbox	css divider, css flexbox, css separator

HTML

<div class="separator">
    <!-- Text -->
    <div class="separator__content">
        ...
    </div>

    <!-- Separator line -->
    <div class="separator__separator"></div>
</div>

CSS

.separator {
    /* Content is centered horizontally */
    align-items: center;
    display: flex;

    /* Used to set the position of text */
    position: relative;
}

.separator__content {
    /* We won't see the separator line */
    background: #fff;

    /* Displayed at the center of separator */
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);

    /* Spacing */
    padding: 0 0.25rem;

    /* Demo */
    width: 60%;
}

.separator__separator {
    border-bottom: 1px solid #d1d5db;
    height: 1px;
    width: 100%;
}

{% demo %} {% include "covers/separator.njk" %} {% enddemo %}