Fix Bold on Hover Styles

28 Jul 2020 • 1 min

Add a hidden pseudo element with the same text string but set it to the bold font size

example: https://codepen.io/hexagoncircle/pen/WNrYPLo

.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;
  }
}