{"id":317525,"date":"2020-07-27T07:36:49","date_gmt":"2020-07-27T14:36:49","guid":{"rendered":"https:\/\/css-tricks.com\/?p=317525"},"modified":"2020-07-27T07:36:50","modified_gmt":"2020-07-27T14:36:50","slug":"bold-on-hover-without-the-layout-shift","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/bold-on-hover-without-the-layout-shift\/","title":{"rendered":"Bold on Hover&#8230; Without the Layout Shift"},"content":{"rendered":"\n<p>When you change the <code>font-weight<\/code> of a font, the text will typically cause a bit of a layout shift. That&#8217;s because bold text is often larger and takes up more space. Sometimes that doesn&#8217;t matter, like a vertical stack of links where the wider\/bolder text doesn&#8217;t push anything anyway. Sometimes it <em>does<\/em> matter, 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\" rel=\"noopener\">Ryan Mulligan demonstrates<\/a>:<\/p>\n\n\n\n<!--more-->\n\n\n\n<blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">Bolding text on mouse hover causes a layout shift that&#8217;s especially noticeable when elements start wrapping. Here&#8217;s a nifty trick: add a hidden pseudo element with the same text string but set it to the bold font size &#x1f64c;<br><br>See it on <a href=\"https:\/\/twitter.com\/CodePen?ref_src=twsrc%5Etfw\" rel=\"noopener\">@CodePen<\/a>: <a href=\"https:\/\/t.co\/kBzZXqqtmi\">https:\/\/t.co\/kBzZXqqtmi<\/a> <a href=\"https:\/\/t.co\/kdZBTLQ0RD\">pic.twitter.com\/kdZBTLQ0RD<\/a><\/p>\u2014 Ryan Mulligan (@hexagoncircle) <a href=\"https:\/\/twitter.com\/hexagoncircle\/status\/1285234486200934402?ref_src=twsrc%5Etfw\" rel=\"noopener\">July 20, 2020<\/a><\/blockquote> <script async=\"\" src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n\n\n\n<p>Ryan&#8217;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&#8217;t take up any additional width. <\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WNrYPLo\" src=\"\/\/codepen.io\/anon\/embed\/WNrYPLo?height=450&amp;theme-id=1&amp;slug-hash=WNrYPLo&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNrYPLo\" title=\"CodePen Embed WNrYPLo\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>It also sorta depends on how you&#8217;re doing the layout. Here, if I force four columns with CSS grid and text that doesn&#8217;t really challenge the width, the bolding doesn&#8217;t affect the layout either:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ExPGoaY\" src=\"\/\/codepen.io\/anon\/embed\/ExPGoaY?height=350&amp;theme-id=1&amp;slug-hash=ExPGoaY&amp;default-tab=css,result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ExPGoaY\" title=\"CodePen Embed ExPGoaY\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>But if I were to, say, <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 font-weight of a font, the text will typically cause a bit of a layout shift. That&#8217;s because bold text is often larger and takes up more space. Sometimes that doesn&#8217;t matter, like a vertical stack of links where the wider\/bolder text doesn&#8217;t push anything anyway. Sometimes it does matter, like a [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":317584,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1373,1154],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/bold-no-shifty-shift.gif?fit=600%2C300&ssl=1","jetpack-related-posts":[{"id":351017,"url":"https:\/\/css-tricks.com\/firefoxs-bolder-default-is-a-problem-for-variable-fonts\/","url_meta":{"origin":317525,"position":0},"title":"Firefox\u2019s `bolder` Default is a Problem for Variable Fonts","date":"September 7, 2021","format":false,"excerpt":"Variable fonts make it easy to create a large set of font styles from a single font file. Unfortunately, the default rendering of the <b> and <strong> elements in browsers today is not very compatible with the wide range of font-weight values enabled by variable fonts. https:\/\/twitter.com\/zachleat\/status\/1374443096281280517 Browsers disagree on\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/default-rendering-b.png?fit=1200%2C763&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":334360,"url":"https:\/\/css-tricks.com\/weekly-platform-news-webkit-autofill-using-cursor-pointer-delaying-autoplay-videos\/","url_meta":{"origin":317525,"position":1},"title":"Weekly Platform News: WebKit autofill, Using Cursor Pointer, Delaying Autoplay Videos","date":"February 12, 2021","format":false,"excerpt":"In this week's roundup, WebKit's prefixed autofill becomes a standard, the pointer cursor is for more than just links, and browsers are jumping on board to delay videos set to autoplay until they're in view... plus more! Let's jump right into it. CSS\u00a0::-webkit-autofill\u00a0has become a standard feature Chrome, Safari, and\u2026","rel":"","context":"In &quot;Weekly Platform News&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/wpn-20210212.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":304025,"url":"https:\/\/css-tricks.com\/4-ways-to-animate-the-color-of-a-text-link-on-hover\/","url_meta":{"origin":317525,"position":2},"title":"4 Ways to Animate the Color of a Text Link on Hover","date":"March 3, 2020","format":false,"excerpt":"Let\u2019s create a pure CSS effect that changes the color of a text link on hover\u2026 but slide that new color in instead of simply swapping colors. There are four different techniques we can use to do this. Let\u2019s look at those while being mindful of important things, like accessibility,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":338003,"url":"https:\/\/css-tricks.com\/the-making-and-potential-benefits-of-a-css-font\/","url_meta":{"origin":317525,"position":3},"title":"The Making (and Potential Benefits) of a CSS Font","date":"April 22, 2021","format":false,"excerpt":"Not a typical one, at least. Each character is an HTML element, built with CSS. A true web font! Let me elaborate. This is a way to render text without using any font at all. Random text is split with PHP into words and letters, then rendered as HTML elements\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/css-font-example.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":356977,"url":"https:\/\/css-tricks.com\/control-layout-in-a-multi-directional-website\/","url_meta":{"origin":317525,"position":4},"title":"Control Layout in a Multi-Directional Website","date":"November 23, 2021","format":false,"excerpt":"Many business websites need a multilingual setup. As with anything development-related, implementing one in an easy, efficient, and maintainable way is desirable. Designing and developing to be ready for multiple languages, whether it happens right at launch or is expected to happen at any point in the future, is smart.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/s_EB2B5807BB67AB4D3A5A08E24A95E2DA3A380C9ECA54FED1EDE0A35A4D308E5C_1635162442827_design.jpg?fit=1200%2C1103&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":374690,"url":"https:\/\/css-tricks.com\/creating-animated-clickable-cards-with-the-has-relational-pseudo-class\/","url_meta":{"origin":317525,"position":5},"title":"Creating Animated, Clickable Cards With the :has() Relational Pseudo Class","date":"October 25, 2022","format":false,"excerpt":"The CSS :has() pseudo class is rolling out in many browsers with Chrome and Safari already fully supporting it. It\u2019s often referred to it as \u201cthe parent selector\u201d \u2014 as in, we can select style a parent element from a child selector \u2014 but there is so much more that\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/card-has-after.png?fit=913%2C433&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/bold-no-shifty-shift.gif?fit=600%2C300&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/317525"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=317525"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/317525\/revisions"}],"predecessor-version":[{"id":317585,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/317525\/revisions\/317585"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/317584"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=317525"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=317525"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=317525"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}