Skip to content

Latest commit

 

History

History
34 lines (27 loc) · 830 Bytes

create-a-line-on-sides-heading.md

File metadata and controls

34 lines (27 loc) · 830 Bytes
Raw
title category date topics
Create a line-on-sides heading
Tip
2021-03-03 16:16:00 +7
CSS

A heading whose left and right sides are horizontal lines can be structured as a grid with three columns:

.heading {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-gap: 1rem;
    text-align: center;
}

1fr auto 1fr indicates that the left and right columns will have the same widths and they'll take the remaining spaces.

We can use the ::before and ::after pseudo elements to represent the left and right sides of the heading respectively:

.heading::before,
.heading::after {
    align-self: center;
    border-top: 0.25rem double #e5e7eb;
    content: '';
}

Demo

:demo[]{title="Create a line-on-sides heading" url="/demo/create-a-line-on-sides-heading/index.html"}