{"id":198607,"date":"2015-04-03T09:31:53","date_gmt":"2015-04-03T16:31:53","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=198607"},"modified":"2021-08-02T11:01:58","modified_gmt":"2021-08-02T18:01:58","slug":"text-decoration-color","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-color\/","title":{"rendered":"text-decoration-color"},"content":{"rendered":"\n<p>The <code>text-decoration-color<\/code> property sets the color of the underline, overline, or line-through on text with the <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration\/\">text-decoration<\/a><\/code> property applied. It can also set the underline color on links.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">a {\n  text-decoration-color: #E18728;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<p><code>text-decoration-color<\/code> can <code>inherit<\/code> or accept any <a href=\"https:\/\/css-tricks.com\/snippets\/css\/named-colors-and-hex-equivalents\/\">CSS color value<\/a>, including named colors, HEX colors, RGBa, and HSLa.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"shorthand\">Shorthand<\/h3>\n\n\n<p>In browsers that support <code>text-decoration-style<\/code> and <code>text-decoration-color<\/code> you can add a color to a <code>text-decoration<\/code> shorthand property:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.underlined {\n  text-decoration: underline dotted red;\n}<\/code><\/pre>\n\n\n\n<p>Currently only Firefox supports this unprefixed. Safari supports it with the <code>-webkit<\/code> prefix. Chrome also needs the <code>-webkit<\/code> prefix and experimental web platform features enabled in Chrome flags.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo\">Demo<\/h3>\n\n\n<p>The <code>text-decoration-color<\/code> in this demo works in the current versions of Firefox and Safari. It will also work in Chrome with the &#8220;experimental Web Platform features&#8221; flag enabled.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_16e86bc664783866371f3b2672b13a98\" src=\"\/\/codepen.io\/anon\/embed\/16e86bc664783866371f3b2672b13a98?height=450&amp;theme-id=1&amp;slug-hash=16e86bc664783866371f3b2672b13a98&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 16e86bc664783866371f3b2672b13a98\" title=\"CodePen Embed 16e86bc664783866371f3b2672b13a98\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\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>31\u2020<\/td><td>7.1*<\/td><td>6.0\u2021<\/td><td>None<\/td><td>None<\/td><td>None<\/td><td>8*<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u2020 with the &#8220;experimental Web Platform features&#8221; turned on in chrome:\/\/flags. Chrome 31 needed -webkit- prefix. We tested Chrome 50 and it only worked unprefixed.<br>\u2021 6+ with -moz prefix, unprefixed as of 36.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul><li><a href=\"http:\/\/www.w3.org\/TR\/css-text-decor-3\/#text-decoration-color-property\" rel=\"noopener\"><code>text-decoration-color<\/code> in the CSS Text Decoration Module Level 3 CR<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/text-decoration-color\" rel=\"noopener\"><code>text-decoration-color<\/code> at MDN<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The text-decoration-color property sets the color of the underline, overline, or line-through on text with the text-decoration property applied. It can also set the underline color on links. Values text-decoration-color can inherit or accept any CSS color value, including named colors, HEX colors, RGBa, and HSLa. Shorthand In browsers that support text-decoration-style and text-decoration-color you [&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":{"_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":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":14108,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration\/","url_meta":{"origin":198607,"position":0},"title":"text-decoration","date":"September 6, 2011","format":false,"excerpt":"The text-decoration property adds an underline, overline, line-through, or a combination of lines to selected text. h3 { text-decoration: underline; } Values none: no line is drawn, and any existing decoration is removed.underline: draws a 1px line across the text at its baseline.line-through: draws a 1px line across the text\u2026","rel":"","context":"With 15 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":312405,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-thickness\/","url_meta":{"origin":198607,"position":1},"title":"text-decoration-thickness","date":"June 8, 2020","format":false,"excerpt":"The text-decoration-thickness property in CSS sets the stroke thickness of the decoration line that is used on text in an element. The text-decoration-line value needs to be either underline, line-through, or overline to reflect the thickness property. .text { text-decoration-line: underline; \u00a0 text-decoration-thickness: 2px; } Syntax text-decoration-thickness: auto | from-font\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":200078,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-line\/","url_meta":{"origin":198607,"position":2},"title":"text-decoration-line","date":"April 11, 2015","format":false,"excerpt":"The text-decoration-line property decorates text with an underline, overline, line-through, or a combination of those lines. p { text-decoration-line: underline; } Values none: no line is added, and any existing lines are removed \u2014 for example none removes the default underline on links.underline: adds a 1px underline below the text.overline:\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":198851,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-style\/","url_meta":{"origin":198607,"position":3},"title":"text-decoration-style","date":"April 3, 2015","format":false,"excerpt":"The text-decoration-style property sets the style of the underline on links and the underline, overline, or line-through on any text with text-decoration applied. a { text-decoration-style: solid; } Values solid: the default. Decoration is a single solid line.double: Decoration is a pair of solid lines.dotted: Decoration is a dotted line.dashed:\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":311020,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-underline-offset\/","url_meta":{"origin":198607,"position":4},"title":"text-underline-offset","date":"May 18, 2020","format":false,"excerpt":"The text-underline-offset property in CSS sets the distance of text underlines from their initial position. .element { \u00a0 text-underline-offset: 0.5em; } Once you apply an underline for an element using text-decoration with the value of underline, you can say how far that line should be from your text using the\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":295134,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-skip-ink\/","url_meta":{"origin":198607,"position":5},"title":"text-decoration-skip-ink","date":"August 29, 2019","format":false,"excerpt":"text-decoration-skip-ink is a property that controls the behavior of underline and overline (but not line-through) when the line passes through part of a character\/glyph. This gives you fine-tuned control over how underlines or overlines interact with the characters that extend above the top or hang below the bottom of a\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/198607"}],"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=198607"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/198607\/revisions"}],"predecessor-version":[{"id":345844,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/198607\/revisions\/345844"}],"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=198607"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=198607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}