Fylgja Heading Underline

A heading underline adds a short brand colored bar below a heading, a common accent for section titles. The bar is an ::after pseudo element, so the markup stays a single heading with one class.

Preview

<h2 class="heading-underline">Our services</h2>

.heading-underline {
	--underline-size: 3rem;
	--underline-thickness: 0.25rem;
	--underline-gap: 0.5em;
	--underline-color: var(--brand);

	&::after {
		content: "";
		display: block;
		inline-size: var(--underline-size);
		block-size: var(--underline-thickness);
		margin-block-start: var(--underline-gap);
		border-radius: var(--underline-thickness);
		background: var(--underline-color);
	}

	&.text-center::after {
		margin-inline: auto;
	}
}

Usage

• Add the heading-underline class to any heading.
• Change the bar with --underline-size for the width, --underline-thickness for the height, --underline-gap for the space above it, and --underline-color.
• Add text-center to center both the heading and the bar.

Anatomy

Accessibility

• The bar is decorative and has no content, so it is not announced.
• Do not rely on the bar to mark a heading. Use a real heading element at the right level, so it appears in the outline.

Variants

Centered

<h2 class="heading-underline text-center">What we do</h2>

Custom size

A full width, thin bar turns the accent into a divider below the heading.

<h2 class="heading-underline" style="--underline-size: 100%; --underline-thickness: 2px">Latest articles</h2>

Related: Heading HR, Heading Group.