CSS: Bold on Hover without layout shift #css #scss #bold #hover

bold-hover-without-shift.scss

/*
 By Ryan Mulligan
 Source: https://css-tricks.com/bold-on-hover-without-the-layout-shift/
 */
 .menu-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  color: black;
  text-decoration: none;

  &:hover {
    font-weight: var(--bold);
  }
}

.menu.fix .menu-link::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  font-weight: var(--bold);

  @media speech {
    display: none;
  }
}