← #61 Reuse the current color
#62

Create a line-on-sides heading

Topics: 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

Front-end Tips

Fix a typo or suggest an improvement
#63 Access the selected node in the Console