{"id":311020,"date":"2020-05-18T13:55:47","date_gmt":"2020-05-18T20:55:47","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=311020"},"modified":"2021-08-02T11:15:54","modified_gmt":"2021-08-02T18:15:54","slug":"text-underline-offset","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-underline-offset\/","title":{"rendered":"text-underline-offset"},"content":{"rendered":"\n<p>The <strong><code>text-underline-offset<\/code><\/strong> property in CSS sets the distance of text underlines from their initial position.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n\u00a0 text-underline-offset: 0.5em;\n}<\/code><\/pre>\n\n\n\n<p>Once you apply an underline for an element using <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//t//text-decoration///"><code>text-decoration<\/code><\/a> with the value of underline<strong>,<\/strong> you can say how far that line should be from your text using the <code>text-underline-offset<\/code> property.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-values\">Values<\/h3>\n\n\n<ul><li><code>auto<\/code>: (Default) The browser will specify an appropriate offset for underlines.<\/li><li><code>&lt;length&gt;<\/code>: Any valid length with a specified unit (including negative values). This replaces any information in the font and the browser default.<\/li><li><code>percentage<\/code>: Specifies the offset of underlines as a percentage of 1em in the element&#8217;s font.<\/li><li><code>initial<\/code>: The default setting of the property, which is auto.<\/li><li><code>inherit<\/code>: Adopts the underline offset value of the parent.<\/li><li><code>unset<\/code>: Removes the current offset from the element.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-demo\">Demo<\/h3>\n\n\n<p>In the following demo you can change the value of <code>text-underline-offset<\/code> to see how it affects the text decoration of the element:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKdXQaO\" src=https://css-tricks.com/"////codepen.io//anon//embed//KKdXQaO?height=600&amp;theme-id=1&amp;slug-hash=KKdXQaO&amp;default-tab=result\%22 height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKdXQaO\" title=\"CodePen Embed KKdXQaO\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-notes\">Notes<\/h3>\n\n\n<ul><li><code>text-underline-offset<\/code> <strong>is not<\/strong> part of the shorthand of<code> text-decoration<\/code>.<\/li><li>It <strong>doesn&#8217;t work<\/strong> on other <code>text-decoration<\/code> lines, such as <code>line-through<\/code> or <code>overline<\/code>.<\/li><li>Negative values are accepted, which offsets the underline inward.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-it-is-constant-for-the-descendants\">It is constant for the descendants<\/h3>\n\n\n<p>Once you set a decoration for an element, all its children will have that decoration too. Now imagine you want to change the offset of the underline for one of the children:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">p {\n\u00a0 text-decoration: underline;\n\u00a0 text-underline-offset: 0.5em;\n}\n\u2028\np span {\n\u00a0 text-underline-offset: 1.5em; \/* Doesn't work *\/\n}<\/code><\/pre>\n\n\n\n<p>This doesn\u2019t work because you cannot override an offset of an underline specified by ancestor elements. For this to work, you need to set an underline specificity for the element itself:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">p {\n\u00a0 text-decoration: underline;\n\u00a0 text-underline-offset: 0.5em;\n}\n\u2028\np span {\n\u00a0 text-decoration: underline;\n\u00a0 text-underline-offset: 1.5em; \/* It works! *\/\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-using-em-is-recommended\">Using em is recommended<\/h3>\n\n\n<p>The benefit of using a relative value like em is that the offset will scale with the change of the <code>font-size<\/code> value. On the other hand, if you use a fixed length unit (e.g. pixels), the offset won&#8217;t adjust to the changes and it may not be the distance that you would like to have for your text:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WNQZzLj\" src=https://css-tricks.com/"////codepen.io//anon//embed//WNQZzLj?height=450&amp;theme-id=1&amp;slug-hash=WNQZzLj&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNQZzLj\" title=\"CodePen Embed WNQZzLj\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-percentage-and-the-cascade\">Percentage and the cascade<\/h3>\n\n\n<p>For this property, a length will inherit as a fixed value, and will not scale with the font. On the other hand, a percentage will inherit as a relative value and, therefore, scale with changes in the font as it inherits.<\/p>\n\n\n\n<p>The following demo shows the comparison between using em and percentage values in the case of inheritance and, as you can see, on the left side (in which we are using em) the inherited value is a fixed length. You can check the computed value in your DevTools. That means it doesn&#8217;t scale with the change in the font. On the right side, however, the texts inherit a relative value (in this case 100%); therefore the offset scales with the change in the font:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_rNOYVBB\" src=https://css-tricks.com/"////codepen.io//anon//embed//rNOYVBB?height=450&amp;theme-id=1&amp;slug-hash=rNOYVBB&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed rNOYVBB\" title=\"CodePen Embed rNOYVBB\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-writing-modes-and-text-underline-position\">Writing Modes and text-underline-position<\/h3>\n\n\n<p>Having a vertical writing mode has an effect on <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//t//text-underline-position///">the position of the underline<\/a>. That will change the direction of the offset applied on the element. Play with the values in the following demo:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vYNejXG\" src=https://css-tricks.com/"////codepen.io//anon//embed//vYNejXG?height=450&amp;theme-id=1&amp;slug-hash=vYNejXG&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vYNejXG\" title=\"CodePen Embed vYNejXG\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-related\">Related<\/h3>\n\n\n<ul><li><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//t//text-decoration///"><code>text-decoration<\/code><\/a><\/li><li><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//t//text-underline-position///"><code>text-underline-position<\/code><\/a><\/li><li><a href=https://css-tricks.com/"https:////developer.mozilla.org//en-US//docs//Web//CSS//text-decoration-thickness/" rel=\"noopener\"><code>text-decoration-thickness<\/code><\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-more-information\"><strong>More information<\/strong><\/h3>\n\n\n<p><a href=https://css-tricks.com/"https:////drafts.csswg.org//css-text-decor-4//?underline-offset\%22 rel=\"noopener\">CSS Text Decoration Module Level 4<\/a> (Editor\u2019s Draft)<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-browser-support\">Browser support<\/h3>\n\n\n<p>At the time of this writing, Firefox is the only browser with the full support. Safari doesn&#8217;t support percentage values.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-text-underline-offset\">text-underline-offset<\/h4>\n\n\n<figure class=\"wp-block-table ticss-2969c85c\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">70+<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">12.1+<\/td><td class=\"has-text-align-center\" data-align=\"center\">All<\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=https://css-tricks.com/"https:////caniuse.com//#feat=mdn-css_properties_text-underline-offset\" rel=\"noopener\">caniuse<\/a><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-1145ba4e\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">Android<br>Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android<br>Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android<br>Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">iOS<br>Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera <br>Mini<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">12.2+<\/td><td class=\"has-text-align-center\" data-align=\"center\">Yes<\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=https://css-tricks.com/"https:////caniuse.com//#feat=mdn-css_properties_text-underline-offset\" rel=\"noopener\">caniuse<\/a><\/figcaption><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-text-underline-offset-percentage\">text-underline-offset: percentage <\/h4>\n\n\n<figure class=\"wp-block-table ticss-9af02d04\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">IE<\/th><th class=\"has-text-align-center\" data-align=\"center\">Edge<\/th><th class=\"has-text-align-center\" data-align=\"center\">Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">74+<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=https://css-tricks.com/"https:////caniuse.com//#feat=mdn-css_properties_text-underline-offset_percentage\" rel=\"noopener\">caniuse<\/a><\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-table ticss-91643712\"><table class=\"has-fixed-layout\"><thead><tr><th class=\"has-text-align-center\" data-align=\"center\">Android<br>Chrome<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android<br>Firefox<\/th><th class=\"has-text-align-center\" data-align=\"center\">Android<br>Browser<\/th><th class=\"has-text-align-center\" data-align=\"center\">iOS<br>Safari<\/th><th class=\"has-text-align-center\" data-align=\"center\">Opera <br>Mini<\/th><\/tr><\/thead><tbody><tr><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">No<\/td><td class=\"has-text-align-center\" data-align=\"center\">Yes<\/td><\/tr><\/tbody><\/table><figcaption>Source: <a href=https://css-tricks.com/"https:////caniuse.com//#feat=mdn-css_properties_text-underline-offset_percentage\" rel=\"noopener\">caniuse<\/a><\/figcaption><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The text-underline-offset property in CSS sets the distance of text underlines from their initial position. Once you apply an underline [&hellip;]<\/p>\n","protected":false},"author":4997,"featured_media":0,"parent":13949,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_acf_changed":false,"_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":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/311020"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/4997"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=311020"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/311020\/revisions"}],"predecessor-version":[{"id":345856,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/311020\/revisions\/345856"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13949"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=311020"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=311020"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}