{"id":200,"date":"2018-03-13T19:39:06","date_gmt":"2018-03-13T19:39:06","guid":{"rendered":"https:\/\/jmrowe.com\/blog\/?p=200"},"modified":"2018-03-13T19:39:20","modified_gmt":"2018-03-13T19:39:20","slug":"custom-width-underline","status":"publish","type":"post","link":"https:\/\/jmrowe.com\/blog\/custom-width-underline\/","title":{"rendered":"Custom width underline"},"content":{"rendered":"<p>I used to make custom underlines for websites via illustrator. Specifically when I didn&#8217;t want a full width solution. The following is an example of how to make it happen using only html\/css.<\/p>\n<p>To produce the follow type effect:<\/p>\n<p><a href=\"https:\/\/jmrowe.com\/blog\/design\/custom-width-underline\/attachment\/custom-underline-example\" rel=\"attachment wp-att-201\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-201\" src=\"https:\/\/jmrowe.com\/blog\/wp-content\/uploads\/2018\/03\/custom-underline-example.png\" alt=\"\" width=\"358\" height=\"72\" srcset=\"https:\/\/jmrowe.com\/blog\/wp-content\/uploads\/2018\/03\/custom-underline-example.png 358w, https:\/\/jmrowe.com\/blog\/wp-content\/uploads\/2018\/03\/custom-underline-example-300x60.png 300w\" sizes=\"auto, (max-width: 358px) 100vw, 358px\" \/><\/a><\/p>\n<p>Add HTML element:<\/p>\n<pre class=\"lang:default decode:true\">&lt;i class=\"thin-seperator\"&gt;&lt;\/i&gt;<\/pre>\n<p>CSS needed:<\/p>\n<pre class=\"lang:css decode:true\">.thin-seperator {\r\n    content: '';\r\n    display: block;\r\n    height: 2px;\r\n    width: 80px;\r\n    position: relative;\r\n    top: -22px;\r\n    background-color: orange;\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>I used to make custom underlines for websites via illustrator. Specifically when I didn&#8217;t want a full width solution. The following is an example of how to make it happen using only html\/css. To produce the follow type effect: Add HTML element: &lt;i class=&#8221;thin-seperator&#8221;&gt;&lt;\/i&gt; CSS needed: .thin-seperator { content: &#8221;; display: block; height: 2px; width: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-200","post","type-post","status-publish","format-standard","hentry","category-css"],"_links":{"self":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/200","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/comments?post=200"}],"version-history":[{"count":2,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/200\/revisions"}],"predecessor-version":[{"id":203,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/posts\/200\/revisions\/203"}],"wp:attachment":[{"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/media?parent=200"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/categories?post=200"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jmrowe.com\/blog\/wp-json\/wp\/v2\/tags?post=200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}