Fylgja Heading HR

A heading HR places a heading between two horizontal lines, like a divider with a title. The lines are pseudo elements in a flex row, so the markup stays a single heading.

Preview

<h2 class="heading-hr">Featured work</h2>

.heading-hr {
	--hr-gap: 0.75em;
	--hr-size: 2px;
	--hr-color: color-mix(in oklab, var(--root-bg) 75%, var(--root-fg));
	display: flex;
	align-items: center;
	gap: var(--hr-gap);

	&::before,
	&::after {
		content: "";
		flex: 1;
		min-inline-size: 1rem;
		border-block-end: var(--hr-size) solid var(--hr-color);
	}

	&.--start::before,
	&.--end::after {
		display: none;
	}
}

Usage

• Add the heading-hr class to any heading to center it between two lines.
• Add --start to put the heading at the start with one line after it, or --end to put it at the end with one line before it.
• Change the lines with --hr-size, --hr-color, and --hr-gap.

Anatomy

Accessibility

• The lines are decorative pseudo elements, so screen readers only announce the heading.
• The default line color is a subtle mix of the page colors. Keep it subtle, since the heading text carries the meaning.

Variants

Line after the heading

<h2 class="heading-hr --start">Featured work</h2>

Line before the heading

<h2 class="heading-hr --end">Featured work</h2>

Related: Heading Underline, Heading Group.