{"id":1823,"date":"2015-10-29T15:48:54","date_gmt":"2015-10-29T15:48:54","guid":{"rendered":"http:\/\/cssreset.com\/?p=1823"},"modified":"2015-10-29T15:48:54","modified_gmt":"2015-10-29T15:48:54","slug":"variations-of-the-css-text-decoration-property","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/variations-of-the-css-text-decoration-property\/","title":{"rendered":"Variations of the CSS Text-Decoration Property"},"content":{"rendered":"

The CSS text-decoration<\/strong> property is capable of much more than the standard underlines and strike-throughs. Text-decoration has properties that can create dashed, dotted, or wavy lines positioned below\u00a0or<\/em> above text. \u00a0Use the standard\u00a0text-decoration<\/strong> property to define the decoration as an underline, overline, or line-through. The\u00a0text-decoration-style<\/strong> property defines the style of the decoration. It accepts the parameters solid (default), double, dotted, wavy, dashed, wavy, initial, and inherit.\u00a0There’s also a\u00a0text-decoration-color<\/strong>\u00a0property that allows the decoration lines to be any color.<\/p>\n

Here’s an example of how to use text-decoration to create a pink dashed line above every\u00a0p<\/strong> element.<\/p>\n

\r\n\r\n\t\t
\r\n\r\n\t\t
\r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
css<\/div>\r\n\r\n\t\t\r\n\t\t
\r\n\r\n\t<\/div>\r\n\t\r\n\t
\r\n\t\t
  1. p{<\/span><\/div><\/li>\n
  2. text-decoration<\/span>:<\/span> overline<\/span>;<\/span><\/div><\/li>\n
  3. text-decoration-style:<\/span> dashed<\/span>;<\/span><\/div><\/li>\n
  4. text-decoration-color:<\/span> pink;<\/span><\/div><\/li>\n
  5. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

    This one creates a red wavy line below every a<\/strong> element.<\/p>\n

    \r\n\r\n\t\t
    \r\n\r\n\t\t
    \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
    css<\/div>\r\n\r\n\t\t\r\n\t\t
    \r\n\r\n\t<\/div>\r\n\t\r\n\t
    \r\n\t\t
    1. a{<\/span><\/div><\/li>\n
    2. text-decoration<\/span>:<\/span> underline<\/span>;<\/span><\/div><\/li>\n
    3. text-decoration-style:<\/span> wavy;<\/span><\/div><\/li>\n
    4. text-decoration-color:<\/span> red<\/span>;<\/span><\/div><\/li>\n
    5. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

      And this creates dashed green lines above and below text.<\/p>\n

      \r\n\r\n\t\t
      \r\n\r\n\t\t
      \r\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t
      css<\/div>\r\n\r\n\t\t\r\n\t\t
      \r\n\r\n\t<\/div>\r\n\t\r\n\t
      \r\n\t\t
      1. p{<\/span><\/div><\/li>\n
      2. text-decoration<\/span>:<\/span> underline<\/span> overline<\/span>;<\/span><\/div><\/li>\n
      3. text-decoration-style:<\/span> dashed<\/span>;<\/span><\/div><\/li>\n
      4. text-decoration-color:<\/span> green<\/span>;<\/span><\/div><\/li>\n
      5. }<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n

        As of right now, text-decoration-style<\/strong> and text-decoration-color<\/strong> are only supported on Firefox, but as other browsers catch up they we’ll definitely be seeing more of these awesome CSS properties.<\/p>\n

        Share and Enjoy !<\/h3>
        0<\/span><\/span>Shares<\/small><\/div>
        <\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

        The CSS text-decoration property is capable of much more than the standard underlines and strike-throughs. Text-decoration has properties that can create dashed, dotted, or wavy lines positioned below\u00a0or above text. \u00a0Use the standard\u00a0text-decoration property to define the decoration as an […]<\/p>\n

        Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1823"}],"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=1823"}],"version-history":[{"count":5,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1823\/revisions"}],"predecessor-version":[{"id":1828,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/1823\/revisions\/1828"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=1823"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=1823"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=1823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}