Bold on Hover… Without the Layout Shift

栏目: IT技术 · 发布时间: 4年前

内容简介:When you change theRyan’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, i

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:


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

新经济,新规则

新经济,新规则

[美]Kevin Kelly / 刘仲涛 / 译言·东西文库/电子工业出版社 / 2014-7 / CNY 45.00

近年来,互联网持续震动着全世界各个行业以至于整个经济规则……在中国,以小米为代表的各类“互联网思维”轰轰烈烈地颠覆着各个行业……而这一切的一切,凯文凯利早就通过这本小书轻松写定。《新规则,新经济》一书介绍互联网时代,互联网影响下的经济运行的十个新游戏规则。一起来看看 《新经济,新规则》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

html转js在线工具
html转js在线工具

html转js在线工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具