Underline element relative to its width


Wed Jun 23 2021 06:02:59 GMT+0000 (UTC)

Saved by @hisam #css #styling

element::after {
	/* ::before and ::after are pseudo-elements, and require a content attribute to exist. Often, we make it empty, because we are using these pseudo-elements to do funky little visual UI tricks, that have no content within. Also, mixing content and style feels wrong. */
	content: "";
	/* border on the bottom */
	border-bottom: 1px solid black;

	/* All the following is positioning stuff. It is absolute, so it is out of the flow, and we can put it wherever we want. We are putting it at the bottom of its (relative) parent, and we position its left-side 50% across the width of its parent (from the left). */
	position: absolute;
	width: 60%;
	bottom: 0;
	left: 50%;
	/* THEN we use the transform:translate to move it back to the left, but this time, just 50% of its OWN width. The effect of moving it right 50% of its parent, and left 50% of its own width, centers it in its parent. magic! */
	transform: translate(-50%, 0);