{"id":198664,"date":"2015-04-03T09:37:29","date_gmt":"2015-04-03T16:37:29","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=198664"},"modified":"2021-08-02T11:17:53","modified_gmt":"2021-08-02T18:17:53","slug":"text-underline-position","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-underline-position\/","title":{"rendered":"text-underline-position"},"content":{"rendered":"\n<p>The <code>text-underline-position<\/code> property sets the placement of the underline on links or on text with <code><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//t//text-decoration///">text-decoration<\/a>: underline;<\/code> applied.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  text-underline-position: under;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<p>These are the values specified in the W3C CSS Text Decoration Module Level 3 Candidate Recommendation:<\/p>\n\n\n\n<ul><li><code>auto<\/code>: the default. The browser will decide between placing the underline at the text&#8217;s baseline or under it.<\/li><li><code>inherit<\/code>: inherits the underline position of the parent.<\/li><li><code>under<\/code>: places the underline under the text with extra space to prevent crossing descenders.<\/li><li><code>left<\/code>: for vertical writing modes. This places the line to the left of the text.<\/li><li><code>right<\/code>: for vertical writing modes. This places the line to the right of the text.<\/li><\/ul>\n\n\n\n<p>Microsoft uses a different set of values for Internet Explorer:<\/p>\n\n\n\n<ul><li><code>auto<\/code>: the default. Places the underline below the text for all languages except Japanese (see the MSDN link in the &#8220;More Information&#8221; section below for details).<\/li><li><code>above<\/code>: positions the underline above the text. Visually identical to <code><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//t//text-decoration///">text-decoration<\/a>: overline;<\/code><\/li><li><code>below<\/code>: positions the underline below the text. Note that this is different from <code>under<\/code> \u2014 it will not clear descenders.<\/li><li><code>auto-pos<\/code> works the same as the MS implementation of <code>auto<\/code>.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo\">Demo<\/h3>\n\n\n<p>At the time of this writing, <code>text-underline-position<\/code> is only partially supported by Chrome (33+ with experimental flags enabled) and Internet Explorer 6+. Chrome supports the <code>auto<\/code>, <code>inherit<\/code>, and <code>under<\/code> values from the W3C candidate recommendation, while IE supports its own alternate values.<\/p>\n\n\n\n<p>This demo shows the <code>under<\/code> and <code>below<\/code> values in the browsers that support them.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ef3a15e212603355706bf715e5f2ea85\" src=https://css-tricks.com/"////codepen.io//anon//embed//ef3a15e212603355706bf715e5f2ea85?height=450&amp;theme-id=1&amp;slug-hash=ef3a15e212603355706bf715e5f2ea85&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ef3a15e212603355706bf715e5f2ea85\" title=\"CodePen Embed ef3a15e212603355706bf715e5f2ea85\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"related\">Related<\/h3>\n\n\n<ul><li><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//t//text-decoration///">text-decoration<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul><li><a href=https://css-tricks.com/"http:////www.w3.org//TR//css-text-decor-3//#text-underline-position-property\" rel=\"noopener\"><code>text-underline-position<\/code> in the CSS Text Decoration Module Level 3 CR.<\/a><\/li><li><a href=https://css-tricks.com/"https:////msdn.microsoft.com//en-us//library//ie//ms531176(v=vs.85).aspx/" rel=\"noopener\"><code>text-underline-position<\/code> at MSDN.<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<figure class=\"wp-block-table browser-support-table\"><table><thead><tr><th>Chrome<\/th><th>Safari<\/th><th>Firefox<\/th><th>Opera<\/th><th>IE<\/th><th>Android<\/th><th>iOS<\/th><\/tr><\/thead><tbody><tr><td>33 *<\/td><td>None<\/td><td>None<\/td><td>None<\/td><td>6 \u2020<\/td><td>None<\/td><td>None<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>* with <code>-webkit<\/code> prefix and experimental flags enabled in chrome:\/\/flags. <code>left<\/code> and <code>right<\/code> values not supported.<br>\u2020 with <code>-ms<\/code> prefix and IE-specific values.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The text-underline-position property sets the placement of the underline on links or on text with text-decoration: underline; applied. Values These [&hellip;]<\/p>\n","protected":false},"author":33562,"featured_media":0,"parent":13949,"menu_order":0,"comment_status":"open","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\/198664"}],"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\/33562"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=198664"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/198664\/revisions"}],"predecessor-version":[{"id":345859,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/198664\/revisions\/345859"}],"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=198664"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=198664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}