diff --git a/docs/4d4edbda57043aeeabeac31d2dd12d0d.js b/docs/4d4edbda57043aeeabeac31d2dd12d0d.js index 8ac739f4b..7bcc14567 100644 --- a/docs/4d4edbda57043aeeabeac31d2dd12d0d.js +++ b/docs/4d4edbda57043aeeabeac31d2dd12d0d.js @@ -5,15 +5,15 @@ var global = (1,eval)("this"); var e=(0,eval)("this"),t="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},a=function(){var e=/\blang(?:uage)?-(\w+)\b/i,a=0,n=t.Prism={manual:t.Prism&&t.Prism.manual,disableWorkerMessageHandler:t.Prism&&t.Prism.disableWorkerMessageHandler,util:{encode:function(e){return e instanceof r?new r(e.type,n.util.encode(e.content),e.alias):"Array"===n.util.type(e)?e.map(n.util.encode):e.replace(/&/g,"&").replace(/e.length)return;if(!(w instanceof o)){p.lastIndex=0;var x=1;if(!(C=p.exec(w))&&f&&v!=t.length-1){if(p.lastIndex=k,!(C=p.exec(e)))break;for(var F=C.index+(h?C[1].length:0),S=C.index+C[0].length,A=v,j=k,P=t.length;A=(j+=t[A].length)&&(++v,k=j);if(t[v]instanceof o||t[A-1].greedy)continue;x=A-v,w=e.slice(k,j),C.index-=k}if(C){h&&(m=C[1].length);S=(F=C.index+m)+(C=C[0].slice(m)).length;var C,N=w.slice(0,F),O=w.slice(S),E=[v,x];N&&(++v,k+=N.length,E.push(N));var $=new o(u,d?n.tokenize(C,d):C,y,C,f);if(E.push($),O&&E.push(O),Array.prototype.splice.apply(t,E),1!=x&&n.matchGrammar(e,t,a,v,k,!0,u),s)break}else if(s)break}}}}},tokenize:function(e,t,a){var r=[e],i=t.rest;if(i){for(var s in i)t[s]=i[s];delete t.rest}return n.matchGrammar(e,r,t,0,0,!1),r},hooks:{all:{},add:function(e,t){var a=n.hooks.all;a[e]=a[e]||[],a[e].push(t)},run:function(e,t){var a=n.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(t)}}},r=n.Token=function(e,t,a,n,r){this.type=e,this.content=t,this.alias=a,this.length=0|(n||"").length,this.greedy=!!r};if(r.stringify=function(e,t,a){if("string"==typeof e)return e;if("Array"===n.util.type(e))return e.map(function(a){return r.stringify(a,t,e)}).join("");var i={type:e.type,content:r.stringify(e.content,t,a),tag:"span",classes:["token",e.type],attributes:{},language:t,parent:a};if(e.alias){var s="Array"===n.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,s)}n.hooks.run("wrap",i);var l=Object.keys(i.attributes).map(function(e){return e+'="'+(i.attributes[e]||"").replace(/"/g,""")+'"'}).join(" ");return"<"+i.tag+' class="'+i.classes.join(" ")+'"'+(l?" "+l:"")+">"+i.content+""},!t.document)return t.addEventListener?(n.disableWorkerMessageHandler||t.addEventListener("message",function(e){var a=JSON.parse(e.data),r=a.language,i=a.code,s=a.immediateClose;t.postMessage(n.highlight(i,n.languages[r],r)),s&&t.close()},!1),t.Prism):t.Prism;var i=document.currentScript||[].slice.call(document.getElementsByTagName("script")).pop();return i&&(n.filename=i.src,n.manual||i.hasAttribute("data-manual")||("loading"!==document.readyState?window.requestAnimationFrame?window.requestAnimationFrame(n.highlightAll):window.setTimeout(n.highlightAll,16):document.addEventListener("DOMContentLoaded",n.highlightAll))),t.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=a),void 0!==e&&(e.Prism=a),a.languages.markup={comment://,prolog:/<\?[\s\S]+?\?>/,doctype://i,cdata://i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{tag:{pattern:/^<\/?[^\s>\/]+/i,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=(?:("|')(?:\\[\s\S]|(?!\1)[^\\])*\1|[^\s'">=]+)/i,inside:{punctuation:[/^=/,{pattern:/(^|[^\\])["']/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:/&#?[\da-z]{1,8};/i},a.languages.markup.tag.inside["attr-value"].inside.entity=a.languages.markup.entity,a.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),a.languages.xml=a.languages.markup,a.languages.html=a.languages.markup,a.languages.mathml=a.languages.markup,a.languages.svg=a.languages.markup,a.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(?:;|(?=\s*\{))/i,inside:{rule:/@[\w-]+/}},url:/url\((?:(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^{}\s][^{};]*?(?=\s*\{)/,string:{pattern:/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},property:/[-_a-z\xA0-\uFFFF][-\w\xA0-\uFFFF]*(?=\s*:)/i,important:/\B!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:]/},a.languages.css.atrule.inside.rest=a.util.clone(a.languages.css),a.languages.markup&&(a.languages.insertBefore("markup","tag",{style:{pattern:/()[\s\S]*?(?=<\/style>)/i,lookbehind:!0,inside:a.languages.css,alias:"language-css",greedy:!0}}),a.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|')(?:\\[\s\S]|(?!\1)[^\\])*\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:a.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:a.languages.css}},alias:"language-css"}},a.languages.markup.tag)),a.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{}[\];(),.:]/},a.languages.javascript=a.languages.extend("clike",{keyword:/\b(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(?:0[xX][\dA-Fa-f]+|0[bB][01]+|0[oO][0-7]+|\d*\.?\d+(?:[Ee][+-]?\d+)?|NaN|Infinity)\b/,function:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*\()/i,operator:/-[-=]?|\+[+=]?|!=?=?|<>?>?=?|=(?:==?|>)?|&[&=]?|\|[|=]?|\*\*?=?|\/=?|~|\^=?|%=?|\?|\.{3}/}),a.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[[^\]\r\n]+]|\\.|[^/\\\[\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0,greedy:!0},"function-variable":{pattern:/[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*(?=\s*=\s*(?:function\b|(?:\([^()]*\)|[_$a-z\xA0-\uFFFF][$\w\xA0-\uFFFF]*)\s*=>))/i,alias:"function"}}),a.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,greedy:!0,inside:{interpolation:{pattern:/\$\{[^}]+\}/,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:a.languages.javascript}},string:/[\s\S]+/}}}),a.languages.markup&&a.languages.insertBefore("markup","tag",{script:{pattern:/()[\s\S]*?(?=<\/script>)/i,lookbehind:!0,inside:a.languages.javascript,alias:"language-javascript",greedy:!0}}),a.languages.js=a.languages.javascript,"undefined"!=typeof self&&self.Prism&&self.document&&document.querySelector&&(self.Prism.fileHighlight=function(){var e={js:"javascript",py:"python",rb:"ruby",ps1:"powershell",psm1:"powershell",sh:"bash",bat:"batch",h:"c",tex:"latex"};Array.prototype.slice.call(document.querySelectorAll("pre[data-src]")).forEach(function(t){for(var n,r=t.getAttribute("data-src"),i=t,s=/\blang(?:uage)?-(?!\*)(\w+)\b/i;i&&!s.test(i.className);)i=i.parentNode;if(i&&(n=(t.className.match(s)||[,""])[1]),!n){var l=(r.match(/\.(\w+)$/)||[,""])[1];n=e[l]||l}var o=document.createElement("code");o.className="language-"+n,t.textContent="",o.textContent="Loading…",t.appendChild(o);var u=new XMLHttpRequest;u.open("GET",r,!0),u.onreadystatechange=function(){4==u.readyState&&(u.status<400&&u.responseText?(o.textContent=u.responseText,a.highlightElement(o)):u.status>=400?o.textContent="✖ Error "+u.status+" while fetching file: "+u.statusText:o.textContent="✖ Error: File does not exist or is empty")},u.send(null)})},document.addEventListener("DOMContentLoaded",self.Prism.fileHighlight)); },{}],11:[function(require,module,exports) { var e=Element.prototype;e.matches||(e.matches=e.matchesSelector||e.msMatchesSelector||e.webkitMatchesSelector||e.mozMatchesSelector),e.closest||(e.closest=function(e){var t=this;if(!document.documentElement.contains(t))return null;do{if(t.matches(e))return t;t=t.parentElement||t.parentNode}while(null!==t&&1===t.nodeType);return null}); -},{}],14:[function(require,module,exports) { +},{}],15:[function(require,module,exports) { var global = (1,eval)("this"); var o=(0,eval)("this"),n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o};!function(o,t){"object"===("undefined"==typeof exports?"undefined":n(exports))&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):o.Jump=t()}(this,function(){"use strict";var o,t,e=function(o,n,t,e){return(o/=e/2)<1?t/2*o*o+n:-t/2*(--o*(o-2)-1)+n},i="function"==typeof Symbol&&"symbol"===n(Symbol.iterator)?function(o){return void 0===o?"undefined":n(o)}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":void 0===o?"undefined":n(o)},r=function(){var o=void 0,n=void 0,t=void 0,r=void 0,u=void 0,d=void 0,f=void 0,c=void 0,a=void 0,s=void 0,l=void 0,y=void 0;function m(o){return o.getBoundingClientRect().top+n}function v(t){a||(a=t),l=u(s=t-a,n,f,c),window.scrollTo(0,l),s1&&void 0!==arguments[1]?arguments[1]:{};switch(c=s.duration||1e3,r=s.offset||0,y=s.callback,u=s.easing||e,d=s.a11y||!1,n=window.scrollY||window.pageYOffset,void 0===a?"undefined":i(a)){case"number":o=void 0,d=!1,t=n+a;break;case"object":t=m(o=a);break;case"string":o=document.querySelector(a),t=m(o)}switch(f=t-n+r,i(s.duration)){case"number":c=s.duration;break;case"function":c=s.duration(f)}window.requestAnimationFrame(v)}}();return o=void 0,t=function(){return o=!1},function(n){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!o){var i=window.scrollY||window.pageYOffset;return".header"!==n&&(location.hash=n),scroll(0,i),o=!0,setTimeout(t,e.duration||0),r(n,e)}}}); -},{}],15:[function(require,module,exports) { +},{}],14:[function(require,module,exports) { "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=exports.select=function(e){return document.querySelector(e)},t=exports.selectAll=function(e){return[].slice.call(document.querySelectorAll(e))},o=exports.scrollY=function(){return window.scrollY||window.pageYOffset},r=exports.easeOutQuint=function(e,t,o,r){return o*((e=e/r-1)*Math.pow(e,4)+1)+t};/iPhone|iPad|iPod/.test(navigator.platform)&&!window.MSStream&&(document.body.style.cursor="pointer"),function(){var e=navigator.userAgent,t=/Mac/.test(navigator.platform)&&(e.match(/OS X 10[._](\d{1,2})/)||[])[1]>=11,o=(e.match(/Chrome\/(\d+)\./)||[])[1]<64||(e.match(/Firefox\/(\d+)\./)||[])[1]<58,r=[].slice.call(document.querySelectorAll("*"));t&&o?(document.documentElement.style.letterSpacing="-0.3px",r.forEach(function(e){parseFloat(getComputedStyle(e).fontSize)>=20&&(e.style.letterSpacing="0.3px")})):t&&!o&&r.forEach(function(e){var t=getComputedStyle(e),o=t.fontSize;"italic"===t.fontStyle&&(e.style.letterSpacing=parseFloat(o)>=20?"0.3px":"-0.3px")})}(); },{}],12:[function(require,module,exports) { "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../deps/jump"),t=i(e),s=require("../deps/utils");function i(e){return e&&e.__esModule?e:{default:e}}var r=(0,s.select)(".hamburger"),n=(0,s.select)(".sidebar__links"),a="is-active",u=function(){return[r,n].forEach(function(e){return e.classList.toggle(a)})};r.addEventListener("click",u),n.addEventListener("click",function(e){setTimeout(u,40),e.target.classList.contains("sidebar__link")&&(e.preventDefault(),(0,t.default)(e.target.getAttribute("href"),{duration:750,offset:window.innerWidth<=768?-64:-32,easing:s.easeOutQuint}))}),document.addEventListener("click",function(e){e.target.closest(".sidebar__links")||e.target.closest(".hamburger")||!n.classList.contains(a)||u()}),exports.default={toggle:u}; -},{"../deps/jump":14,"../deps/utils":15}],13:[function(require,module,exports) { +},{"../deps/jump":15,"../deps/utils":14}],13:[function(require,module,exports) { "use strict";var e=require("../deps/jump"),t=s(e),i=require("../deps/utils");function s(e){return e&&e.__esModule?e:{default:e}}var u=(0,i.select)(".back-to-top-button");window.addEventListener("scroll",function(){u.classList[(0,i.scrollY)()>500?"add":"remove"]("is-visible")}),u.onclick=function(){(0,t.default)(".header",{duration:750,easing:i.easeOutQuint})}; -},{"../deps/jump":14,"../deps/utils":15}],7:[function(require,module,exports) { +},{"../deps/jump":15,"../deps/utils":14}],7:[function(require,module,exports) { "use strict";require("normalize.css"),require("prismjs"),require("../css/deps/prism.css"),require("../css/index.scss"),require("./deps/polyfills");var e=require("./components/Menu"),s=u(e),r=require("./components/BackToTopButton"),i=u(r);function u(e){return e&&e.__esModule?e:{default:e}} },{"normalize.css":16,"prismjs":17,"../css/deps/prism.css":16,"../css/index.scss":16,"./deps/polyfills":11,"./components/Menu":12,"./components/BackToTopButton":13}]},{},[7]) \ No newline at end of file diff --git a/docs/index.html b/docs/index.html index 10fda79e7..1eb7f7cbf 100644 --- a/docs/index.html +++ b/docs/index.html @@ -11,7 +11,7 @@ .floated { float: left; } -

Demo

float a
float b
float c

Explanation

  1. .clearfix::after defines a pseudo-element.
  2. content: '' allows the pseudo-element to affect layout.
  3. clear: both indicates that the left, right or both sides of the element cannot be adjacent to earlier floated elements within the same block formatting context.

Browser support

99+%

✅ No caveats.

Constant width to height ratio

Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion (i.e., its width to height ratio remains constant).

HTML

<div class="constant-width-to-height-ratio"></div>
+

Demo

float a
float b
float c

Explanation

  1. .clearfix::after defines a pseudo-element.
  2. content: '' allows the pseudo-element to affect layout.
  3. clear: both indicates that the left, right or both sides of the element cannot be adjacent to earlier floated elements within the same block formatting context.

Browser support

99+%

✅ No caveats.

Constant width to height ratio

Given an element of variable width, it will ensure its height remains proportionate in a responsive fashion (i.e., its width to height ratio remains constant).

HTML

<div class="constant-width-to-height-ratio"></div>

CSS

.constant-width-to-height-ratio {
   background: #333;
   width: 50%;
@@ -148,6 +148,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
   width: 300px;
   height: 25px;
   background: linear-gradient(rgba(255, 255, 255, 0.001), white); /* transparent keyword is broken in Safari */
+  pointer-events: none;
 }
 .overflow-scroll-gradient__scroller {
   overflow-y: scroll;
@@ -158,7 +159,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
   line-height: 1.2;
   text-align: center;
 }
-

Demo

Content to be scrolled

Explanation

  1. position: relative on the parent establishes a Cartesian positioning context for psuedo elements.
  2. ::after defines a pseudo element.
  3. background-image: linear-gradient(...) adds a linear gradient that fades from transparent to white (top to bottom).
  4. position: absolute takes the pseudo element out of the flow of the document and positions it in relation to the parent.
  5. width: 300px matches the size of the scrolling element (which is a child of the parent that has the pseudo element).
  6. height: 25px is the height of the fading gradient psuedo element, which should be kept relatively small.
  7. bottom: 0 positions the pseudo element at the bottom of the parent.

Browser support

94.8%

✅ No caveats.

Popout menu

Reveals an interactive popout menu on hover.

HTML

<div class="reference">
+

Demo

Content to be scrolled

Explanation

  1. position: relative on the parent establishes a Cartesian positioning context for psuedo-elements.
  2. ::after defines a pseudo element.
  3. background-image: linear-gradient(...) adds a linear gradient that fades from transparent to white (top to bottom).
  4. position: absolute takes the pseudo element out of the flow of the document and positions it in relation to the parent.
  5. width: 300px matches the size of the scrolling element (which is a child of the parent that has the pseudo element).
  6. height: 25px is the height of the fading gradient psuedo-element, which should be kept relatively small.
  7. bottom: 0 positions the pseudo-element at the bottom of the parent.
  8. pointer-events: none specifies that the psuedo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.

Browser support

94.8%

✅ No caveats.

Popout menu

Reveals an interactive popout menu on hover.

HTML

<div class="reference">
   <div class="popout-menu">
     Popout menu
   </div>
diff --git a/index.html b/index.html
index 548f0695a..8f099d52e 100644
--- a/index.html
+++ b/index.html
@@ -605,6 +605,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
   width: 300px;
   height: 25px;
   background: linear-gradient(rgba(255, 255, 255, 0.001), white); /* transparent keyword is broken in Safari */
+  pointer-events: none;
 }
 .overflow-scroll-gradient__scroller {
   overflow-y: scroll;
@@ -635,6 +636,7 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
                 width: 300px;
                 height: 25px;
                 bottom: 0;
+                pointer-events: none;
               }
               .snippet-demo__overflow-scroll-gradient__scroller {
                 overflow-y: scroll;
@@ -651,13 +653,14 @@ var y = e.pageY - btn.offsetTop - btn.offsetParent.offsetTop
             
             
Explanation

             
    
-              
  1. position: relative on the parent establishes a Cartesian positioning context for psuedo elements.
    2. 
+              
  2. position: relative on the parent establishes a Cartesian positioning context for psuedo-elements.
    3. 
               
  3. ::after defines a pseudo element.
    4. 
               
  4. background-image: linear-gradient(...) adds a linear gradient that fades from transparent to white (top to bottom).
    5. 
               
  5. position: absolute takes the pseudo element out of the flow of the document and positions it in relation to the parent.
    6. 
               
  6. width: 300px matches the size of the scrolling element (which is a child of the parent that has the pseudo element).
    7. 
-              
  7. height: 25px is the height of the fading gradient psuedo element, which should be kept relatively small.
    8. 
-              
  8. bottom: 0 positions the pseudo element at the bottom of the parent.
    9. 
+              
  9. height: 25px is the height of the fading gradient psuedo-element, which should be kept relatively small.
    10. 
+              
  10. bottom: 0 positions the pseudo-element at the bottom of the parent.
    11. 
+              
  11. pointer-events: none specifies that the psuedo-element cannot be a target of mouse events, allowing text behind it to still be selectable/interactive.
    12. 
             

             
Browser support

             

diff --git a/snippets/pretty-text-underline.md b/snippets/pretty-text-underline.md
index e1a45c062..171fe9d80 100644
--- a/snippets/pretty-text-underline.md
+++ b/snippets/pretty-text-underline.md
@@ -14,13 +14,13 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control
 ```css
 .pretty-text-underline {
   display: inline;
-  font-size: 1.25rem;
+  font-size: 18px;
   text-shadow: 1px 1px 0 #f5f6f9,
     -1px 1px 0 #f5f6f9,
     -1px -1px 0 #f5f6f9,
     1px -1px 0 #f5f6f9;
   background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
-  background-position: 0 1.04em;
+  background-position: 0 18px;
   background-repeat: repeat-x;
   background-size: 1px 1px;
 }
@@ -49,7 +49,7 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control
     -1px -1px 0 #f5f6f9,
     1px -1px 0 #f5f6f9;
   background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
-  background-position: 0 1.04em;
+  background-position: 0 18px;
   background-repeat: repeat-x;
   background-size: 1px 1px;
 }