Negrita al pasar el mouse… sin el cambio de diseño

Cuando cambias la font-weightfuente, el texto normalmente provocará un pequeño cambio en el diseño. Esto se debe a que el texto en negrita suele ser más grande y ocupa más espacio. A veces eso no importa, como una pila vertical de enlaces donde el texto más ancho/en negrita no empuja nada de todos los modos. A veces sí importa, como una fila horizontal donde el texto más ancho/en negrita aleja un poco otros elementos.

Ryan Mulligan lo demuestra:

El texto en negrita al pasar el mouse provoca un cambio en el diseño que se nota especialmente cuando los elementos comienzan a ajustarse. Aquí tienes un truco ingenioso: agrega un pseudoelemento oculto con la misma cadena de texto pero configúralo en tamaño de fuente en negro.

Véalo en @CodePen: https://t.co/kBzZXqqtmi pic.twitter.com/kdZBTLQ0RD

– Ryan Mulligan (@hexagoncircle) 20 de julio de 2020

La técnica de Ryan es muy inteligente. Cada elemento de la lista tiene un pseudoelemento con el texto exacto del enlace. Ese pseudoelemento está visualmente oculto, pero ya está en negrita y aún ocupa el ancho. Entonces, cuando el texto del enlace real esté en negrita, no ocupará ningún ancho adicional.

También depende de cómo estés haciendo el diseño. Aquí, si fuerzo cuatro columnas con cuadrícula CSS y texto que realmente no desafía el ancho, la negrita tampoco afecta el diseño:

Pero si, por ejemplo, dejara que esos enlaces fluyan hacia columnas automáticas, tendríamos el problema de desplazamiento.