{"id":1349,"date":"2020-08-14T13:45:34","date_gmt":"2020-08-14T13:45:34","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=1349"},"modified":"2020-08-14T13:45:34","modified_gmt":"2020-08-14T13:45:34","slug":"bold-on-hover-without-the-layout-shift","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=1349","title":{"rendered":"Bold on Hover\u2026 Without the Layout Shift"},"content":{"rendered":"\n<p>When you change the\u00a0<code>font-weight<\/code>\u00a0of a font, the text will typically cause a bit of a layout shift. That\u2019s because bold text is often larger and takes up more space. <\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Sometimes that doesn\u2019t matter, like a vertical stack of links where the wider\/bolder text doesn\u2019t push anything anyway. Sometimes it\u00a0<em>does<\/em>\u00a0matter, like a horizontal row where the wider\/bolder text pushes other elements away a smidge.<\/p>\n\n\n\n<p><a href=\"https:\/\/twitter.com\/hexagoncircle\/status\/1285234486200934402\">Ryan Mulligan demonstrates<\/a>:<\/p>\n\n\n\n<figure><iframe allowfullscreen=\"true\" class=\"\" src=\"https:\/\/platform.twitter.com\/embed\/index.html?creatorScreenName=chriscoyier&amp;dnt=false&amp;embedId=twitter-widget-0&amp;frame=false&amp;hideCard=false&amp;hideThread=false&amp;id=1285234486200934402&amp;lang=en&amp;origin=https%3A%2F%2Fcss-tricks.com%2Fbold-on-hover-without-the-layout-shift%2F&amp;siteScreenName=CSS&amp;theme=light&amp;widgetsVersion=223fc1c4%3A1596143124634&amp;width=550px\"><\/iframe><\/figure>\n\n\n\n<p>Ryan\u2019s 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\u2019t take up any additional width.<\/p>\n\n\n\n<figure><iframe src=\"https:\/\/codepen.io\/anon\/embed\/WNrYPLo?height=450&amp;theme-id=1&amp;slug-hash=WNrYPLo&amp;default-tab=result\" height=\"450\" allowfullscreen=\"\"><\/iframe><\/figure>\n\n\n\n<p>It also sorta depends on how you\u2019re doing the layout. Here, if I force four columns with CSS grid and text that doesn\u2019t really challenge the width, the bolding doesn\u2019t affect the layout either:<\/p>\n\n\n\n<figure><iframe src=\"https:\/\/codepen.io\/anon\/embed\/ExPGoaY?height=350&amp;theme-id=1&amp;slug-hash=ExPGoaY&amp;default-tab=css,result\" height=\"350\" allowfullscreen=\"\"><\/iframe><\/figure>\n\n\n\n<p>But if I were to, say,&nbsp;<a href=\"https:\/\/css-tricks.com\/flexbox-like-just-put-elements-in-a-row-with-css-grid\/\">let those links flow into automatic columns<\/a>, we would have the shifting problem.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When you change the\u00a0font-weight\u00a0of a font, the text will typically cause a bit of a layout shift. That\u2019s because bold text is often larger and takes up more space.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1349"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1349"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1349\/revisions"}],"predecessor-version":[{"id":1350,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1349\/revisions\/1350"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1349"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1349"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}