{"id":993,"date":"2019-11-10T21:01:51","date_gmt":"2019-11-11T01:01:51","guid":{"rendered":"https:\/\/bostonianadam.com\/?p=993"},"modified":"2023-01-04T18:31:43","modified_gmt":"2023-01-04T23:31:43","slug":"new-css-to-style-underlines","status":"publish","type":"post","link":"https:\/\/bostonianadam.com\/2019\/11\/new-css-to-style-underlines\/","title":{"rendered":"New CSS to style underlines"},"content":{"rendered":"\n<p>Mozilla&#8217;s Jen Simmons posted a video on YouTube recently talking about some new CSS for styling underlines, &#8220;text-underline-offset,&#8221; &#8220;text-decoration-thickness,&#8221; and &#8220;text-decoration-skip-ink.&#8221; The video I am referring to is embedded below and I added a few simple code examples down below as well.<\/p>\n\n\n\n<p>I think these new styles will be useful and web developers can now stop using CSS borders to style underlines (for those that do) and use this new CSS instead. Just a heads up though, as Jen mentions in her video, that right now this new CSS only works in the Mozilla Firefox and Safari (and maybe soon in Chrome) web browsers.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Video: New CSS for Styling Underlines on the Web<\/h4>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"New CSS for Styling Underlines on the Web\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/sZS-7RX_c7g?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<!--more-->\n\n\n\n<h4 class=\"wp-block-heading\">Code example using: text-underline-offset<\/h4>\n\n\n\n<p>The new CSS property &#8220;text-underline-offset&#8221; lets you set the amount of space between the underlined text and the actual underline. You can read more about it on the awesome <a rel=\"noreferrer noopener\" aria-label=\"MDN web docs site (opens in a new tab)\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/text-underline-offset\" target=\"_blank\">MDN web docs site<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>CSS:\n&lt;style&gt;\n.link1 {\n    text-underline-offset: 3px;\n}\n&lt;\/style&gt;\n\nHTML:\n&lt;a class=\"link1\" href=\"#\"&gt;Link 1&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Code example using: text-decoration-thickness<\/h4>\n\n\n\n<p>The new CSS property &#8220;text-decoration-thickness&#8221; lets you set the thickness of the actual underline. You can read more about it on the awesome <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/text-decoration-thickness\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"MDN web docs site (opens in a new tab)\">MDN web docs site<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>CSS:\n&lt;style&gt;\n.link2 {\n    text-decoration-thickness: 3px;\n}\n&lt;\/style&gt;\n\nHTML:\n&lt;a class=\"link2\" href=\"#\"&gt;Link 2&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Code example using: text-decoration-skip-ink<\/h4>\n\n\n\n<p>The new CSS property &#8220;text-decoration-skip-ink&#8221; lets you specify how overlines and underlines are displayed when they encounter text that hangs low\/or is tall. An example in the English language would be: p, g, y. It&#8217;s easier to understand this one by viewing the actual underlines. You can read more about it on the awesome <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/text-decoration-skip-ink\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"MDN web docs site (opens in a new tab)\">MDN web docs site<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>CSS:\n&lt;style&gt;\n.link3 {\n    text-decoration-skip-ink: auto; \/* value can also be \"none\" which makes the underlines\/overlines go right through the text *\/\n}\n&lt;\/style&gt;\n\nHTML:\n&lt;a class=\"link3\" href=\"#\"&gt;Link 3, test: p g y&lt;\/a&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Mozilla&#8217;s Jen Simmons posted a video on YouTube recently talking about some new CSS for styling underlines, &#8220;text-underline-offset,&#8221; &#8220;text-decoration-thickness,&#8221; and &#8220;text-decoration-skip-ink.&#8221; The video I am referring to is embedded below and I added a few simple code examples down below as well. I think these new styles will be useful and web developers can now [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[64],"tags":[13,15,19,25,67],"aioseo_notices":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/posts\/993"}],"collection":[{"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/comments?post=993"}],"version-history":[{"count":2,"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/posts\/993\/revisions"}],"predecessor-version":[{"id":2647,"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/posts\/993\/revisions\/2647"}],"wp:attachment":[{"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/media?parent=993"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/categories?post=993"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bostonianadam.com\/wp-json\/wp\/v2\/tags?post=993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}