{"id":14108,"date":"2011-09-06T18:43:06","date_gmt":"2011-09-07T01:43:06","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=14108"},"modified":"2021-08-02T10:54:53","modified_gmt":"2021-08-02T17:54:53","slug":"text-decoration","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration\/","title":{"rendered":"text-decoration"},"content":{"rendered":"\n<p>The <code>text-decoration<\/code> property adds an underline, overline, line-through, or a combination of lines to selected text.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">h3 {\n  text-decoration: underline;\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<ul><li><code>none<\/code>: no line is drawn, and any existing decoration is removed.<\/li><li><code>underline<\/code>: draws a 1px line across the text at its baseline.<\/li><li><code>line-through<\/code>: draws a 1px line across the text at its &#8220;middle&#8221; point.<\/li><li><code>overline<\/code>: draws a 1px line across the text, directly above its &#8220;top&#8221; point.<\/li><li><code>inherit<\/code>: inherits the decoration of the parent.<\/li><\/ul>\n\n\n\n<p>The <code>blink<\/code> value is in the W3C spec, but it is deprecated and will not work in any current browser. When it worked, it made the text appear to &#8220;blink&#8221; by rapidly toggling it between 0% and 100% opacity.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo\">Demo<\/h3>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PwMmWv\" src=\"\/\/codepen.io\/anon\/embed\/PwMmWv?height=450&amp;theme-id=1&amp;slug-hash=PwMmWv&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PwMmWv\" title=\"CodePen Embed PwMmWv\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"usage-notes\">Usage Notes<\/h3>\n\n\n<p>You can combine the <code>underline<\/code>, <code>overline<\/code>, or <code>line-through<\/code> values in a space-separated list to add multiple decoration lines:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">p {\n  text-decoration: overline underline line-through;\n}<\/code><\/pre>\n\n\n\n<p>By default, the line or lines inherit the color of the text as set by its <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/c\/color\/\">color<\/a><\/code> property. You can change this in browsers that support the <code>text-decoration-color<\/code> property or the three-value shorthand property.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"textdecoration-as-a-shorthand-property\"><code>text-decoration<\/code> as a Shorthand Property<\/h3>\n\n\n<p><code>text-decoration<\/code> can be used in combination with <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-style\/\">text-decoration-style<\/a><\/code> and <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-color\/\">text-decoration-color<\/a><\/code> as a shorthand property:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.fancy-underline {\n  text-decoration-line: underline;\n  text-decoration-style: wavy;\n  text-decoration-color: red;\n \n  \/* can be shortened to *\/\n  text-decoration: underline wavy 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=\"browser-support\">Browser support<\/h3>\n\n\n<p>All browsers support the CSS2.1 &#8220;longhand&#8221; property <code>text-decoration<\/code>. The shorthand property and the sub-properties <code>text-decoration-color<\/code>, <code>text-decoration-line<\/code>, and <code>text-decoration-style<\/code> are supported unprefixed in Firefox, and with the <code>-webkit<\/code> prefix in Safari. Chrome will also recognize those values with the <code>-webkit<\/code> prefix and Experimental Web Platforms flag enabled.<\/p>\n\n\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=text-decoration\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"a yep-nope yep-nope-partial\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">127<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">128<\/span><\/td><td class=\"n nope\" title=\"IE - \"><span class=\"caniuse-agents-version version\">No<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">TP<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"a yep-nope yep-nope-partial\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"a yep-nope yep-nope-partial\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">17.5*<\/span><\/td><\/tr><\/table><\/div><\/div>\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\" rel=\"noopener\"><code>text-decoration<\/code> as a shorthand property in the W3C spec CSS Text Decoration Module Level 3 CR<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/text-decoration\" rel=\"noopener\"><code>text-decoration<\/code> at MDN<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The text-decoration property adds an underline, overline, line-through, or a combination of lines to selected text. 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 at its &#8220;middle&#8221; point. overline: draws a 1px [&hellip;]<\/p>\n","protected":false},"author":1036,"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":312405,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-thickness\/","url_meta":{"origin":14108,"position":0},"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":198851,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-style\/","url_meta":{"origin":14108,"position":1},"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":14108,"position":2},"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":198664,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-underline-position\/","url_meta":{"origin":14108,"position":3},"title":"text-underline-position","date":"April 3, 2015","format":false,"excerpt":"The text-underline-position property sets the placement of the underline on links or on text with text-decoration: underline; applied. .element { text-underline-position: under; } Values These are the values specified in the W3C CSS Text Decoration Module Level 3 Candidate Recommendation: auto: the default. The browser will decide between placing the\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":198601,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-skip\/","url_meta":{"origin":14108,"position":4},"title":"text-decoration-skip","date":"March 31, 2015","format":false,"excerpt":"The text-decoration-skip property specifies where a text underline, overline, or strike-through should break. This improves legibility of decorated text and corrects punctuation grammar for some languages. Here's one example: a { text-decoration-skip: ink; } Heads up! The ink value has been changed to an entirely new property, text-decoration-skip-ink: auto;. If\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":198607,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-color\/","url_meta":{"origin":14108,"position":5},"title":"text-decoration-color","date":"April 3, 2015","format":false,"excerpt":"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. a { text-decoration-color: #E18728; } Values text-decoration-color can inherit or accept any CSS color value, including named colors, HEX colors, RGBa, and\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14108"}],"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\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=14108"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14108\/revisions"}],"predecessor-version":[{"id":345833,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/14108\/revisions\/345833"}],"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=14108"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=14108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}