PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux
No Result
View All Result
PikoPong
No Result
View All Result
Home Web Dev

Bold on Hover… Without the Layout Shift

July 27, 2020
in Web Dev
272 20
Bold on Hover… Without the Layout Shift


When you change the font-weight of a font, the text will typically cause a bit of a layout shift. That’s because bold text is often larger and takes up more space. Sometimes that doesn’t matter, like a vertical stack of links where the wider/bolder text doesn’t push anything anyway. Sometimes it does matter, like a horizontal row where the wider/bolder text pushes other elements away a smidge.

Ryan Mulligan demonstrates:

Bolding text on mouse hover causes a layout shift that’s especially noticeable when elements start wrapping. Here’s a nifty trick: add a hidden pseudo element with the same text string but set it to the bold font size ?

See it on @CodePen: https://t.co/kBzZXqqtmi pic.twitter.com/kdZBTLQ0RD

— Ryan Mulligan (@hexagoncircle) July 20, 2020

Ryan’s technique is very clever. Each item in the list has a pseudo-element on it with the exact text in the link. That pseudo-element is visually hidden, but pre-bolded and still occupies width. So when the actual link text is bolded, it won’t take up any additional width.

It also sorta depends on how you’re doing the layout. Here, if I force four columns with CSS grid and text that doesn’t really challenge the width, the bolding doesn’t affect the layout either:

But if I were to, say, let those links flow into automatic columns, we would have the shifting problem.





Source link

Share219Tweet137Share55Pin49

Related Posts

Intrinsic Typography is the Future of Styling Text on the Web
Web Dev

Intrinsic Typography is the Future of Styling Text on the Web

The way we style text hasn’t changed much over the years. There have been numerous advancements to help make...

April 20, 2021
Say Hello To CSS Container Queries
Web Dev

Say Hello To CSS Container Queries

I haven’t been more excited for a CSS feature like I’m now in the past six years I spent...

April 20, 2021
Keep Logs Tidy With the Log Cleaner Package for Laravel
Web Dev

Keep Logs Tidy With the Log Cleaner Package for Laravel

Laravel Log Cleaner is a package by Joost van Veen for keeping your log files small and tidy. While...

April 20, 2021
Making GraphQL Work In WordPress — Smashing Magazine
Web Dev

Making GraphQL Work In WordPress — Smashing Magazine

About The AuthorLeonardo Losoviz is a freelance developer and writer, with an ongoing quest to integrate innovative paradigms (Serverless...

April 20, 2021
Next Post
Replacing web server functionality with serverless services : idk.dev

Replacing web server functionality with serverless services : idk.dev

Using Trello as a Super Simple CMS

Using Trello as a Super Simple CMS

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

Free Early Bird Registration for SPOTcon 2021 Now Open

Free Early Bird Registration for SPOTcon 2021 Now Open

March 15, 2021
How To Migrate From WordPress To The Eleventy Static Site Generator — Smashing Magazine

How To Migrate From WordPress To The Eleventy Static Site Generator — Smashing Magazine

December 4, 2020
How To Convince Others Not To Use Dark Patterns — Smashing Magazine

Meet Our New Smashing Book — Smashing Magazine

June 2, 2020
Introducing Instance Refresh for EC2 Auto Scaling : idk.dev

Introducing Instance Refresh for EC2 Auto Scaling : idk.dev

June 17, 2020

Categories

  • AWS
  • Big Data
  • Database
  • DevOps
  • IoT
  • Linux
  • Web Dev
No Result
View All Result
  • Web Dev
  • Hack
  • Database
  • Big Data
  • AWS
  • Linux

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In