{"id":3202,"date":"2016-09-22T18:50:12","date_gmt":"2016-09-22T16:50:12","guid":{"rendered":"https:\/\/en.florianbrinkmann.de\/?p=3202"},"modified":"2020-02-09T11:00:00","modified_gmt":"2020-02-09T10:00:00","slug":"position-underlining-closer-to-the-text-css","status":"publish","type":"post","link":"https:\/\/florianbrinkmann.com\/en\/position-underlining-closer-to-the-text-css-3202\/","title":{"rendered":"Position underlining closer to the text [CSS]"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Perhaps you use <code class=\"lang-css\">border-bottom<\/code> instead of <code class=\"lang-css\">text-decoration: underline<\/code> to underline links or other text. But if this underline is too far from the text, you have a problem, because you cannot position a border closer to the text. Here I show you how you can resolve that.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">Problem: The \u00bbmarking height\u00ab of fonts<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">First here is a screenshot which shows the problem \u2013 the underline is implemented via <code class=\"lang-css\">border-bottom<\/code>:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><noscript><img decoding=\"async\" width=\"1206\" height=\"355\" src=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-zu-weit-vom-text.png\" alt class=\"wp-image-3203\" srcset=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-zu-weit-vom-text.png 1206w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-zu-weit-vom-text-679x200.png 679w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-zu-weit-vom-text-300x88.png 300w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-zu-weit-vom-text-768x226.png 768w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-zu-weit-vom-text-806x237.png 806w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-zu-weit-vom-text-600x177.png 600w\" sizes=\"(max-width: 1206px) 100vw, 1206px\"><\/noscript><img decoding=\"async\" width=\"1206\" height=\"355\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201206%20355%22%3E%3C%2Fsvg%3E\" alt class=\"wp-image-3203 lazyload\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201206%20355%22%3E%3C%2Fsvg%3E 1206w\" sizes=\"(max-width: 1206px) 100vw, 1206px\" data-srcset=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-zu-weit-vom-text.png 1206w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-zu-weit-vom-text-679x200.png 679w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-zu-weit-vom-text-300x88.png 300w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-zu-weit-vom-text-768x226.png 768w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-zu-weit-vom-text-806x237.png 806w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-zu-weit-vom-text-600x177.png 600w\" data-src=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-zu-weit-vom-text.png\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">As you can see, the border is displayed at the lower edge of the blue area which appears when selecting text. The height of this area is different from font to font and in my current project too large at the bottom. It looks like the line should be a border between the lines, not an underline.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As far as I know, this mark can\u2019t be affected, and a border can\u2019t be positioned inside this area.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The solution: <code class=\"lang-css\">background<\/code><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A gradient can be set as the value of the CSS background-image property (<a href=\"http:\/\/caniuse.com\/#feat=css-gradients\">according to <em>Can I Use<\/em> this works since IE10<\/a>). We specify the same color for start and end and get a one-color box. We can specify the size of the box with the property background-size \u2013 in our case, a width of 100 percent and a height of one pixel, to get a line. With background-position, this line can be positioned, and finished is the underline in the right position.<\/p>\n\n\n<pre class=\"wp-block-code lang-css\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">background<\/span>: <span class=\"hljs-selector-tag\">transparent<\/span> <span class=\"hljs-selector-tag\">linear-gradient<\/span>(90<span class=\"hljs-selector-tag\">deg<\/span>, <span class=\"hljs-selector-id\">#000<\/span>, <span class=\"hljs-selector-id\">#000<\/span>) <span class=\"hljs-selector-tag\">no-repeat<\/span> 0 93%;\n<span class=\"hljs-selector-tag\">background-size<\/span>: 100% 1<span class=\"hljs-selector-tag\">px<\/span>;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\"><code class=\"lang-css\">0<\/code> is the distance to the left, <code class=\"lang-css\">1.3rem<\/code> the distance to the top. To provide a fallback for IE9, we add a line before the code above with a PNG file as the background. This image\u2019s size is 1\u00d71 pixel, and it is repeated horizontally to form a line. This is the complete code:<\/p>\n\n\n<pre class=\"wp-block-code lang-css\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTTP\" data-shcb-language-slug=\"http\"><span><code class=\"hljs language-http\"><span class=\"hljs-attribute\">background<\/span>: transparent url('..\/images\/link-underline.png') repeat no-repeat 0 93%;\n<span class=\"hljs-attribute\">background<\/span>: transparent linear-gradient(90deg, #333, #333) no-repeat 0 93%;\n<span class=\"hljs-attribute\">background-size<\/span>: 100% 1px;<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTTP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">http<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">And the result:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><noscript><img decoding=\"async\" width=\"1206\" height=\"355\" src=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-korrigierte-position.png\" alt class=\"wp-image-3204\" srcset=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-korrigierte-position.png 1206w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-korrigierte-position-679x200.png 679w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-korrigierte-position-300x88.png 300w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-korrigierte-position-768x226.png 768w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-korrigierte-position-806x237.png 806w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-korrigierte-position-600x177.png 600w\" sizes=\"(max-width: 1206px) 100vw, 1206px\"><\/noscript><img decoding=\"async\" width=\"1206\" height=\"355\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201206%20355%22%3E%3C%2Fsvg%3E\" alt class=\"wp-image-3204 lazyload\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201206%20355%22%3E%3C%2Fsvg%3E 1206w\" sizes=\"(max-width: 1206px) 100vw, 1206px\" data-srcset=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-korrigierte-position.png 1206w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-korrigierte-position-679x200.png 679w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-korrigierte-position-300x88.png 300w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-korrigierte-position-768x226.png 768w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-korrigierte-position-806x237.png 806w, https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-korrigierte-position-600x177.png 600w\" data-src=\"https:\/\/florianbrinkmann.com\/en\/wp-content\/uploads\/sites\/11\/2016\/12\/textunterstreichung-korrigierte-position.png\"><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Perhaps you use border-bottom instead of text-decoration: underline to underline links or other text. But if this underline is too far from the text, you have a problem, because you cannot position a border closer to the text. Here I show you how you can resolve that.<\/p>\n","protected":false},"author":1,"featured_media":3205,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wpf_show_in_dewp_planet_feed":false,"flobn_post_versions":"","webmentions_disabled_pings":false,"webmentions_disabled":false,"lazy_load_responsive_images_disabled":false,"footnotes":""},"categories":[6],"tags":[],"class_list":["post-3202","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development"],"wp-worthy-pixel":{"ignored":false,"public":"b8fa42dee3e54335a362583c639bf34c","server":"vg01.met.vgwort.de","url":"https:\/\/vg01.met.vgwort.de\/na\/b8fa42dee3e54335a362583c639bf34c"},"wp-worthy-type":"normal","_links":{"self":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/comments?post=3202"}],"version-history":[{"count":6,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3202\/revisions"}],"predecessor-version":[{"id":5941,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/posts\/3202\/revisions\/5941"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media\/3205"}],"wp:attachment":[{"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/media?parent=3202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/categories?post=3202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/florianbrinkmann.com\/en\/wp-json\/wp\/v2\/tags?post=3202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}