CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
.home
~
.explore

Dot leader

<div style="
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;
">
    <!-- Left side -->
    <div>...</div>

    <!-- Dots -->
    <div style="
        /* Bottom border */
        border-bottom: 1px dotted rgba(0, 0, 0, 0.3);

        /* Take remaining width */
        flex: 1;

        /* Spacing */
        margin: 0px 4px;
    " />

    <!-- Right side -->
    <div>...</div>
</div>

Use cases

Chapter 1
5
Chapter 2
40
Egg
3$
Coffee
5$

Related patterns

Menu

Property list

Split navigation

Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!