{"id":363619,"date":"2022-02-25T07:28:33","date_gmt":"2022-02-25T15:28:33","guid":{"rendered":"https:\/\/css-tricks.com\/?p=363619"},"modified":"2022-02-25T07:28:35","modified_gmt":"2022-02-25T15:28:35","slug":"when-to-avoid-css-text-decoration-shorthand","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/when-to-avoid-css-text-decoration-shorthand\/","title":{"rendered":"When to Avoid the text-decoration Shorthand Property"},"content":{"rendered":"\n<p>In my recent article about <a href=\"https:\/\/css-tricks.com\/css-underlines-are-too-thin-and-too-low-in-chrome\/\">CSS underline bugs in Chrome<\/a>, I discussed <code>text-decoration-thickness<\/code> and <code>text-underline-offset<\/code>, two relatively new and widely-supported CSS properties that give us more control over the styling of underlines.<\/p>\n\n\n\n<p>Let me demonstrate the usefulness of <code>text-decoration-thickness<\/code> on a simple example. The <a href=\"https:\/\/fonts.google.com\/specimen\/Ubuntu\" rel=\"noopener\">Ubuntu web font<\/a> has a fairly thick default underline. We can make this underline thinner like so:<\/p>\n\n\n\n<!--more-->\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">:any-link {\n  text-decoration-thickness: 0.08em;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1226\" height=\"652\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/ubuntu-font-underline-thickness.png?resize=1226%2C652&#038;ssl=1\" alt=\"Showing two links, a default and one that decreases the text-decoration-thickness.\" class=\"wp-image-363621\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/ubuntu-font-underline-thickness.png?w=1226&amp;ssl=1 1226w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/ubuntu-font-underline-thickness.png?resize=300%2C160&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/ubuntu-font-underline-thickness.png?resize=1024%2C545&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/ubuntu-font-underline-thickness.png?resize=768%2C408&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/ubuntu-font-underline-thickness.png?resize=1000%2C532&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>\/explanation Throughout this article, I will use the <code>:any-link<\/code> selector instead of the <code>a<\/code> element to match hyperlinks. The problem with the <code>a<\/code> tag as a selector is that it matches all <code>&lt;a&gt;<\/code> elements, even the ones that don\u2019t have a <code>href<\/code> attribute and thus <a href=\"https:\/\/www.tempertemper.net\/blog\/links-missing-href-attributes-and-over-engineered-code\" rel=\"noopener\">aren\u2019t hyperlinks<\/a>. The <code>:any-link<\/code> selector only matches <code>&lt;a&gt;<\/code> elements that are hyperlinks. Web browsers also use <code>:any-link<\/code> instead of <code>a<\/code> in their user agent stylesheets.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"hover-underlines\">Hover underlines<\/h3>\n\n\n<p>Many websites, including Google Search and Wikipedia, remove underlines from links and only show them when the user hovers a link. Removing underlines from links in body text is <a href=\"https:\/\/adrianroselli.com\/2016\/06\/on-link-underlines.html\" rel=\"noopener\">not a good idea<\/a>, but it can make sense in places where links are more spaced apart (navigation, footer, etc.). With that being said, here\u2019s a simple implementation of hover underlines for links in the website\u2019s header:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">header :any-link {\n  text-decoration: none;\n}\n\nheader :any-link:hover {\n  text-decoration: underline;\n}<\/code><\/pre>\n\n\n\n<p>But there\u2019s a problem. If we tested this code in a browser, we\u2019d notice that the underlines in the header have the default thickness, not the thinner style that we declared earlier. Why did <code>text-decoration-thickness<\/code> stop working after we added hover underlines?<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKypZyX\" src=\"\/\/codepen.io\/anon\/embed\/KKypZyX?height=450&amp;theme-id=1&amp;slug-hash=KKypZyX&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKypZyX\" title=\"CodePen Embed KKypZyX\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Let\u2019s look at the full CSS code again. Can you think of a reason why the custom <code>thickness<\/code> doesn\u2019t apply to the hover underline?<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">:any-link {\n  text-decoration-thickness: 0.08em;\n}\n\nheader :any-link {\n  text-decoration: none;\n}\n\nheader :any-link:hover {\n  text-decoration: underline;\n}<\/code><\/pre>\n\n\n\n<p>The reason for this behavior is that <code>text-decoration<\/code> is a shorthand property and <code>text-decoration-thickness<\/code> its associated longhand property. Setting <code>text-decoration<\/code> to <code>none<\/code> or <code>underline<\/code> has the side effect of re-initializing the other three text decoration components (<code>thickness<\/code>, <code>style<\/code>, and <code>color<\/code>). This is defined in the <a href=\"https:\/\/drafts.csswg.org\/css-text-decor-4\/#text-decoration-property\" rel=\"noopener\">CSS Text Decoration module<\/a>:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>The <code>text-decoration<\/code> property is a shorthand for setting <code>text-decoration-line<\/code>, <code>text-decoration-thickness<\/code>, <code>text-decoration-style<\/code>, and <code>text-decoration-color<\/code> in one declaration. Omitted values are set to their initial values.<\/p><\/blockquote>\n\n\n\n<p>You can confirm this in the browser\u2019s DevTools by selecting one of the hyperlinks in the DOM inspector and then expanding the <code>text-decoration<\/code> property in the CSS pane.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1098\" height=\"534\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/text-decoration-none-devtools.png?resize=1098%2C534&#038;ssl=1\" alt=\"DevTools screenshot showing text-decoration styles on the :any-link pseudo-selector.\" class=\"wp-image-363622\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/text-decoration-none-devtools.png?w=1098&amp;ssl=1 1098w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/text-decoration-none-devtools.png?resize=300%2C146&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/text-decoration-none-devtools.png?resize=1024%2C498&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/text-decoration-none-devtools.png?resize=768%2C374&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/text-decoration-none-devtools.png?resize=1000%2C486&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>In order to get <code>text-decoration-thickness<\/code> to work on hover underlines, we\u2019ll have to make a small change to the above CSS code. There are actually multiple ways to achieve this. We could:<\/p>\n\n\n\n<ul><li>set <code>text-decoration-thickness<\/code> after <code>text-decoration<\/code>,<\/li><li>declare the thickness in the <code>text-decoration<\/code> shorthand, or<\/li><li>use <code>text-decoration-line<\/code> instead of <code>text-decoration<\/code>.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"choosing-the-best-text-decoration-option\">Choosing the best text-decoration option<\/h3>\n\n\n<p>Our first thought might be to simply repeat the <code>text-decoration-thickness<\/code> declaration in the <code>:hover<\/code> state. It\u2019s a quick and simple fix that indeed works.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* OPTION A *\/\n\nheader :any-link {\n  text-decoration: none;\n}\n\nheader :any-link:hover {\n  text-decoration: underline;\n  text-decoration-thickness: 0.08em; \/* set thickness again *\/\n}<\/code><\/pre>\n\n\n\n<p>However, since <code>text-decoration<\/code> is a shorthand and <code>text-decoration-thickness<\/code> is its associated longhand, there really should be no need to use both at the same time. As a shorthand, <code>text-decoration<\/code> allows setting both the underline itself and the underline\u2019s thickness, all in one declaration.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* OPTION B *\/\n\nheader :any-link {\n  text-decoration: none;\n}\n\nheader :any-link:hover {\n  text-decoration: underline 0.08em; \/* set both line and thickness *\/\n}<\/code><\/pre>\n\n\n\n<p>If this code looks unfamiliar to you, that could be because the idea of using <code>text-decoration<\/code> as a shorthand is relatively new. This property was only subsequently turned into a shorthand in the <a href=\"https:\/\/drafts.csswg.org\/css-text-decor-4\/#text-decoration-property\" rel=\"noopener\">CSS Text Decoration module<\/a>. In the days of <a href=\"https:\/\/drafts.csswg.org\/css2\/#lining-striking-props\" rel=\"noopener\">CSS 2<\/a>, <code>text-decoration<\/code> was a simple property.<\/p>\n\n\n\n<p>Unfortunately, Safari still hasn\u2019t fully caught up with these changes. In the WebKit browser engine, the shorthand variant of <code>text-decoration<\/code> remains prefixed (<code>-webkit-text-decoration<\/code>), and it doesn\u2019t support <code>thickness<\/code> values yet. See <a href=\"https:\/\/bugs.webkit.org\/show_bug.cgi?id=230083\" rel=\"noopener\">WebKit bug 230083<\/a> for more information.<\/p>\n\n\n\n<p>This rules out the <code>text-decoration<\/code> shorthand syntax. The above code won\u2019t work in Safari, even if we added the <code>-webkit-<\/code> prefix. Luckily, there\u2019s another way to avoid repeating the <code>text-decoration-thickness<\/code> declaration.<\/p>\n\n\n\n<p>When <code>text-decoration<\/code> was turned into a shorthand, a new <code>text-decoration-line<\/code> longhand was introduced to take over its old job. We can use this property to hide and show the underline without affecting the other three text decoration components.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* OPTION C *\/\n\nheader :any-link {\n  text-decoration-line: none;\n}\n\nheader :any-link:hover {\n  text-decoration-line: underline;\n}<\/code><\/pre>\n\n\n\n<p>Since we\u2019re only updating the <code>line<\/code> component of the <code>text-decoration<\/code> value, the previously declared <code>thickness<\/code> remains intact. I think that this is the best way to implement hover underlines.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"be-aware-of-shorthands\">Be aware of shorthands<\/h3>\n\n\n<p>Keep in mind that when you set a shorthand property, e.g., <code>text-decoration: underline<\/code>, any missing parts in the value are re-initialized. This is also why styles such as <code>background-repeat: no-repeat<\/code> are undone if you set <code>background: url(flower.jpg)<\/code> afterwards. See the article <a href=\"https:\/\/css-tricks.com\/accidental-css-resets\/\">\u201cAccidental CSS Resets\u201d<\/a> for more examples of this behavior.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In my recent article about CSS underline bugs in Chrome, I discussed text-decoration-thickness and text-underline-offset, two relatively new and widely-supported CSS properties that give us more control over the styling of underlines. Let me demonstrate the usefulness of text-decoration-thickness on a simple example. The Ubuntu web font has a fairly thick default underline. We can [&hellip;]<\/p>\n","protected":false},"author":245432,"featured_media":363622,"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":"A nice reminder from @simevidas about possible accidental resets using the CSS text-decoration shorthand property.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[868],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/text-decoration-none-devtools.png?fit=1098%2C534&ssl=1","jetpack-related-posts":[{"id":359838,"url":"https:\/\/css-tricks.com\/css-underlines-are-too-thin-and-too-low-in-chrome\/","url_meta":{"origin":363619,"position":0},"title":"CSS Underlines Are Too Thin and Too Low in Chrome","date":"January 4, 2022","format":false,"excerpt":"I\u2019ve encountered two bugs in Chrome while testing the new CSS text-decoration-thickness and text-underline-offset properties, and I want to share them with you here in this article. First, let's acknowledge one thing: Default underlines are inconsistent Let\u2019s add a text link to a plain web page, set its font-family to\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/default-link-underlines.png?fit=1200%2C561&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":245767,"url":"https:\/\/css-tricks.com\/styling-underlines-web\/","url_meta":{"origin":363619,"position":1},"title":"Styling Underlines on the Web","date":"October 10, 2016","format":false,"excerpt":"Styling the underlines that sit beneath links can be a tricky business, and I constantly forget what\u2019s the best approach depending on the situation. Thankfully however, John Jameson gets us up to speed in this guest post. There are a bunch of different ways to style underlines. Maybe you remember\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":295079,"url":"https:\/\/css-tricks.com\/styling-links-with-real-underlines\/","url_meta":{"origin":363619,"position":2},"title":"Styling Links with Real Underlines","date":"August 30, 2019","format":false,"excerpt":"Before we come to how to style underlines, we should answer the question: should we underline? In graphic design, underlines are generally seen as unsophisticated. There are nicer ways to draw emphasis, to establish hierarchy, and to demarcate titles. That\u2019s clear in this advice from Butterick\u2019s \"Practical Typography\": If you\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/08\/underlines.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":295935,"url":"https:\/\/css-tricks.com\/link-underlines-that-animate-into-block-backgrounds\/","url_meta":{"origin":363619,"position":3},"title":"Link Underlines That Animate Into Block Backgrounds","date":"September 23, 2019","format":false,"excerpt":"It's a cool little effect. The default link style has an underline (which is a good idea) and then on :hover you see the underline essentially thicken up turning into almost what it would have looked liked if you used a background-color on the link instead. Here's an example of\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/link-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":200249,"url":"https:\/\/css-tricks.com\/more-control-over-text-decoration\/","url_meta":{"origin":363619,"position":4},"title":"More Control over Text Decoration","date":"April 14, 2015","format":false,"excerpt":"Marie Mosley just finished up a revamping of the text-decoration property (and friends) in the Almanac. You're probably aware of this property. For instance, most default browser styles include underlined links by way of text-decoration: underline; - which you can remove with text-decoration: none;. But you may not be aware\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":319655,"url":"https:\/\/css-tricks.com\/a-css-only-animated-wrapping-underline\/","url_meta":{"origin":363619,"position":5},"title":"A CSS-only, animated, wrapping underline","date":"August 21, 2020","format":false,"excerpt":"Nicky Meuleman, inspired by Cassie Evans, details how they built the anchor link hover on their sites. When a link is hovered, another color underline kinda slides in with a gap between the two. Typical text-decoration doesn't help here, so multiple backgrounds are used instead, and fortunately, it works with\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/link-underline-wrapping-gap-1.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/363619"}],"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\/245432"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=363619"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/363619\/revisions"}],"predecessor-version":[{"id":364274,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/363619\/revisions\/364274"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/363622"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=363619"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=363619"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=363619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}