Bottom border extending from the left edge

An example of using CSS pseudo-element for adding a bottom border for a heading that starts from left edge of the browser and ends where the heading ends.

What gets copied: Post Title element.

CSS used:

%root% {
	position: relative;
}

%root%::after {
	--pull-left-by: calc((100vw - var(--content-width)) / 2);
	content: '';
	width: 100%;
	/* height: 4px; */
	/* background-color: var(--base-ultra-dark); */
	border-top: 4px solid;
	position: absolute;
	bottom: calc(-1 * var(--space-xs));
	left: 0;
	margin-inline-start: calc(-1 * var(--pull-left-by));
	width: calc(100% + var(--pull-left-by));
}

If you don’t use ACSS, replace the variables with the ones from the CSS framework that you use or px/em/rem values.

If your Section’s Container has padding, take that into account like this:

--pull-left-by: calc((100vw - var(--content-width)) / 2 + var(--space-l));

Thanks to Maxime Beguin.