{"id":5052,"date":"2015-06-25T12:15:49","date_gmt":"2015-06-25T09:15:49","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=5052"},"modified":"2018-01-08T14:33:25","modified_gmt":"2018-01-08T12:33:25","slug":"css-text-decoration-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/","title":{"rendered":"CSS Text Decoration Example"},"content":{"rendered":"<p>The aim of this example is to show the usage of text-decoration property.<\/p>\n<p>This is a very commonly used property to decorate text mainly with lines. It may also be used to style links in your own way using underline value.<\/p>\n<p>All modern browsers support text-decoration property and you may use it without having to write extra lines of code like -webkit, -moz or -o.<\/p>\n<p>As we will see, you can add two or more values to this property and still get things going well and have a customized styling that you want.<\/p>\n<p>First, we have a look at the basics and then see more cases and examples.<br \/>\n&nbsp;<br \/>\n[ulp id=&#8217;nAkUl5IbAjqlXSla&#8217;]<\/p>\n<h2>1. Basic Setup &amp; Application <\/h2>\n<p>Go ahead and create a new html document and add the basic sytnax in it like so:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\t&lt;title&gt;CSS3 Text Decoration Example&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;!-- STYLE SECTION --&gt;\r\n\r\n&lt;style type=\"text\/css\"&gt;\r\n\r\n&lt;\/style&gt;\r\n\r\n&lt;!-- HTML SECTION --&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Lets first explain how the property is used and values it can take:<\/p>\n<p>1. Usage: <code>text-decoration: value;<\/code><\/p>\n<p>2. Values: <code>underline<\/code>, <code>overline<\/code>, <code>line-through<\/code><\/p>\n<p>A basic application of the text-decoration property would be the following. Create a some lines of text in html:<\/p>\n<pre class=\"brush:xml\">\r\n&lt;!-- HTML SECTION  --&gt;\r\n\r\n&lt;h1&gt;this line is underlined&lt;\/h1&gt;\r\n&lt;h2&gt;this line is overlined&lt;\/h2&gt;\r\n&lt;h3&gt;this line has a line through&lt;\/h3&gt;\r\n<\/pre>\n<p>Applying the property in css would look like so:<\/p>\n<pre class=\"brush:css\">\r\n&lt;!-- STYLE  SECTION --&gt;\r\n\r\n&lt;style type=\"text\/css\"&gt;\r\n\r\nh1 {\r\n\ttext-decoration: underline;\r\n}\r\n\r\nh2 {\r\n\ttext-decoration: overline;\r\n}\r\n\r\nh3 {\r\n\t text-decoration: line-through;\r\n}\r\n\r\n&lt;\/style&gt;\r\n<\/pre>\n<p>The view in the browser for the basic application would be:<br \/>\n<figure id=\"attachment_5061\" aria-describedby=\"caption-attachment-5061\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-decoration1.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-decoration1.jpg\" alt=\"Basic Application of Text-Decoration Property\" width=\"820\" height=\"215\" class=\"size-full wp-image-5061\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-decoration1.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-decoration1-300x79.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-5061\" class=\"wp-caption-text\">Basic Application of Text-Decoration Property<\/figcaption><\/figure><\/p>\n<h2>2. Cases and Examples <\/h2>\n<p>In this sections, we will cover things that you can do with text-decoration and some interesting ways how you can use it.<\/p>\n<p>Notice that the following examples will work best in Firefox, which has full support of them.<\/p>\n<h3>2.1 Multiple Values Example<\/h3>\n<p>In addition to a single attribute value, <code>text-decoration<\/code> can also take multiple values. Look at the code below:<\/p>\n<p>-HTML <\/p>\n<pre class=\"brush:xml\">\r\n&lt;h2 class=\"mix\"&gt;this line will have multiple values&lt;\/h2&gt;\r\n<\/pre>\n<p>Lets add all three common values in css: underline, overline and line-through like below:<\/p>\n<pre class=\"brush:css\">\r\n.mix {\r\n\ttext-decoration: underline overline line-through;\r\n}\r\n<\/pre>\n<p>The view in the browser would be:<br \/>\n<figure id=\"attachment_5067\" aria-describedby=\"caption-attachment-5067\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-decoration2.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-decoration2.jpg\" alt=\"Multiple Common Values Applied\" width=\"820\" height=\"147\" class=\"size-full wp-image-5067\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-decoration2.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-decoration2-300x54.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-5067\" class=\"wp-caption-text\">Multiple Common Values Applied<\/figcaption><\/figure><\/p>\n<p>But you can also use multiple values to add other kind of styling like line style or line color.<\/p>\n<p>-HTML <\/p>\n<pre class=\"brush:xml\">\r\n&lt;h1 class=\"fancy\"&gt;this line will have line styling&lt;\/h1&gt;\r\n<\/pre>\n<p>Lets add a dotted line style and red color to it to make this underline fancy.<\/p>\n<pre class=\"brush:css\">\r\n.fancy {\r\n\ttext-decoration: underline dotted red; \/* works only on firefox *\/\r\n}\r\n<\/pre>\n<p>Currently only supported in Firefox, this styling would look like this in Mozilla Firefox:<br \/>\n<figure id=\"attachment_5070\" aria-describedby=\"caption-attachment-5070\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-decoration3.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-decoration3.jpg\" alt=\"Line Styling using Multiple Attribute Values\" width=\"820\" height=\"147\" class=\"size-full wp-image-5070\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-decoration3.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-decoration3-300x54.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-5070\" class=\"wp-caption-text\">Line Styling using Multiple Attribute Values<\/figcaption><\/figure><\/p>\n<h3>2.2 The Text-Decoration Family<\/h3>\n<p>The text-decoration property is a shorthand to some specific related properties like text-decoration-color\/line\/style.<\/p>\n<p>1. <code>text-decoration-color<\/code> <\/p>\n<p>-HTML <\/p>\n<pre class=\"brush:xml\">\r\n&lt;h2 class=\"color\"&gt;This is the color styled line&lt;\/h2&gt;\r\n<\/pre>\n<p>-CSS<\/p>\n<pre class=\"brush:css\">\r\n.color {\r\n\ttext-decoration: underline;\r\n\ttext-decoration-color: #40b7c2; \r\n<\/pre>\n<p>We did give the line a color, the view is:<br \/>\n<figure id=\"attachment_5073\" aria-describedby=\"caption-attachment-5073\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-decoration4.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-decoration4.jpg\" alt=\"Text-Decoration-Color Attribute \" width=\"820\" height=\"147\" class=\"size-full wp-image-5073\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-decoration4.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-decoration4-300x54.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-5073\" class=\"wp-caption-text\">Text-Decoration-Color Attribute<\/figcaption><\/figure><\/p>\n<p>2. <code>text-decoration-line<\/code> <\/p>\n<p>-HTML <\/p>\n<pre class=\"brush:xml\">\r\n&lt;h2 class=\"line\"&gt;This is the under\/over\/through line&lt;\/h2&gt;\r\n<\/pre>\n<p>-CSS<\/p>\n<pre class=\"brush:css\">\r\n.line {\r\n\ttext-decoration-line: underline; \r\n} \r\n<\/pre>\n<p>We just underlined the sentence, but in the long way, the view is:<br \/>\n<figure id=\"attachment_5074\" aria-describedby=\"caption-attachment-5074\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-decoration5.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-decoration5.jpg\" alt=\"Text-Decoration-Line Attribute\" width=\"820\" height=\"147\" class=\"size-full wp-image-5074\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-decoration5.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-decoration5-300x54.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-5074\" class=\"wp-caption-text\">Text-Decoration-Line Attribute<\/figcaption><\/figure><\/p>\n<p>3. <code>text-decoration-style<\/code> <\/p>\n<p>-HTML <\/p>\n<pre class=\"brush:xml\">\r\n&lt;h2 class=\"style\"&gt;This is the styled line&lt;\/h2&gt;\r\n<\/pre>\n<p>-CSS<\/p>\n<pre class=\"brush:css\">\r\n.style {\r\n\ttext-decoration: underline;\r\n\ttext-decoration-style: dotted;  \/* try solid or wavy *\/\r\n}\r\n<\/pre>\n<p>Here, we gave the line a dotted style, the view is:<br \/>\n<figure id=\"attachment_5076\" aria-describedby=\"caption-attachment-5076\" style=\"width: 820px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-decoration6.jpg\"><img decoding=\"async\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-decoration6.jpg\" alt=\"Text-Decoration-Style Attribute\" width=\"820\" height=\"147\" class=\"size-full wp-image-5076\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-decoration6.jpg 820w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/text-decoration6-300x54.jpg 300w\" sizes=\"(max-width: 820px) 100vw, 820px\" \/><\/a><figcaption id=\"caption-attachment-5076\" class=\"wp-caption-text\">Text-Decoration-Style Attribute<\/figcaption><\/figure><\/p>\n<h2>3. Conclusion <\/h2>\n<p>To conclude, we can state that <code>text-decoration<\/code> property is quite handy when working with text, consider it just like the  bold or color property of text, it is obvious that it is part of the text styling family. The property is very easy to use in css.<\/p>\n<p>Some elements, line the anchor tags include pre-styled text with a <code>text-decoration: underline;<\/code>, so you may want to do  the contrary in those cases, I mean reset text-decoration to none. It always depends on you specific needs for your project.<\/p>\n<h2>4. Download <\/h2>\n<div class=\"download\"><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here: <a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/05\/CSS3-Text-Decoration.zip\"><strong>CSS3 Text Decoration<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The aim of this example is to show the usage of text-decoration property. This is a very commonly used property to decorate text mainly with lines. It may also be used to style links in your own way using underline value. All modern browsers support text-decoration property and you may use it without having to &hellip;<\/p>\n","protected":false},"author":75,"featured_media":917,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-5052","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Text Decoration Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The aim of this example is to show the usage of text-decoration property. This is a very commonly used property to decorate text mainly with lines. It may\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Text Decoration Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The aim of this example is to show the usage of text-decoration property. This is a very commonly used property to decorate text mainly with lines. It may\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-06-25T09:15:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-08T12:33:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"CSS Text Decoration Example\",\"datePublished\":\"2015-06-25T09:15:49+00:00\",\"dateModified\":\"2018-01-08T12:33:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/\"},\"wordCount\":547,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/\",\"name\":\"CSS Text Decoration Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"datePublished\":\"2015-06-25T09:15:49+00:00\",\"dateModified\":\"2018-01-08T12:33:25+00:00\",\"description\":\"The aim of this example is to show the usage of text-decoration property. This is a very commonly used property to decorate text mainly with lines. It may\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Text Decoration Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Text Decoration Example - Web Code Geeks - 2026","description":"The aim of this example is to show the usage of text-decoration property. This is a very commonly used property to decorate text mainly with lines. It may","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/","og_locale":"en_US","og_type":"article","og_title":"CSS Text Decoration Example - Web Code Geeks - 2026","og_description":"The aim of this example is to show the usage of text-decoration property. This is a very commonly used property to decorate text mainly with lines. It may","og_url":"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-06-25T09:15:49+00:00","article_modified_time":"2018-01-08T12:33:25+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"CSS Text Decoration Example","datePublished":"2015-06-25T09:15:49+00:00","dateModified":"2018-01-08T12:33:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/"},"wordCount":547,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/","url":"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/","name":"CSS Text Decoration Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","datePublished":"2015-06-25T09:15:49+00:00","dateModified":"2018-01-08T12:33:25+00:00","description":"The aim of this example is to show the usage of text-decoration property. This is a very commonly used property to decorate text mainly with lines. It may","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/css3-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/css\/css-text-decoration-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/www.webcodegeeks.com\/category\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Text Decoration Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/5052","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=5052"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/5052\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/917"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=5052"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=5052"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=5052"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}