{"id":3020,"date":"2016-11-26T13:26:03","date_gmt":"2016-11-26T19:26:03","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=2011"},"modified":"2016-11-26T13:26:03","modified_gmt":"2016-11-26T19:26:03","slug":"css3s-text-decoration-property","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/css3s-text-decoration-property\/","title":{"rendered":"CSS3&#8217;s Text Decoration Property"},"content":{"rendered":"<p>Knowing how to add an underline your text\u00a0<em>and<\/em> knowing how to remove an underline from your text are equally as important skills to have in CSS (the default style rules in every browser give anchor tags an underline, and knowing how to remove this will go a long way in making your pages look more styled). The values that the text-decoration property takes are: none, underline, overline, and line-through&#8230;and they&#8217;re all pretty self-explanatory. To see some examples, look below:<\/p>\n<pre>p{\n\u00a0 \u00a0text-decoration: underline;\n}<\/pre>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-2012\" src=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2016\/11\/Screen-Shot-2016-11-26-at-2.28.53-PM.png\" alt=\"Screen Shot 2016-11-26 at 2.28.53 PM\" width=\"554\" height=\"102\" \/><\/p>\n<p>Probably the most commonly used text-decoration property value, &#8220;underline&#8221; adds a line beneath the text.<\/p>\n<pre>p{\n\u00a0 \u00a0text-decoration: overline;\n}<\/pre>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-2013\" src=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2016\/11\/Screen-Shot-2016-11-26-at-2.29.02-PM.png\" alt=\"Screen Shot 2016-11-26 at 2.29.02 PM\" width=\"544\" height=\"108\" \/><\/p>\n<p>While you don&#8217;t see &#8220;overline&#8221; very often, it adds a line above the text.<\/p>\n<pre>p{\n\u00a0 \u00a0text-decoration: line-through;\n}<\/pre>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-2014\" src=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2016\/11\/Screen-Shot-2016-11-26-at-2.29.13-PM.png\" alt=\"Screen Shot 2016-11-26 at 2.29.13 PM\" width=\"540\" height=\"86\" \/><\/p>\n<p>Line-through is a really useful property value that adds a strike through your text.<\/p>\n<pre>p{\n\u00a0 \u00a0text-decoration: none;\n}<\/pre>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-2015\" src=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2016\/11\/Screen-Shot-2016-11-26-at-2.29.25-PM.png\" alt=\"Screen Shot 2016-11-26 at 2.29.25 PM\" width=\"526\" height=\"84\" \/><\/p>\n<p>Text-decoration: none is the default for most elements and can be used to get rid of any unwanted over, under, or through lines applied to your text.<\/p>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Knowing how to add an underline your text\u00a0and knowing how to remove an underline from your text are equally as important skills to have in CSS (the default style rules in every browser give anchor tags an underline, and knowing [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/css3s-text-decoration-property\/\" title=\"Click to read 'CSS3&#8217;s Text Decoration Property'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2783,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3020"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=3020"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3020\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2783"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3020"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3020"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3020"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}