5

I've seen it around, most recently here: http://pitchfork.com/news/67863-amazon-launches-new-streaming-service-undercutting-spotify-and-apple-music/

Notice the underline skips the "p" and "y" descenders. If I go to another site that's using the same font and throw text-decoration: underline in, it doesn't apply the same underline styling. Any ideas?

3

4 Answers 4

4

Native support for this is available in recent Chrome, if you use text-decoration-skip: ink & its prefixed variants.


See @pepkin88's comment below, now the property is called text-decoration-skip-ink

1
2

If you inspect that element in the site, you will find out that it isn't really a text decoration but a line simulation of it, because text decoration is inactive.

.contents a {
        color: #1A1A1A;
        background: linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#FF3530,#FF3530);
        background-size: .05em 1px,.05em 1px,1px 1px;
        background-repeat: no-repeat,no-repeat,repeat-x;
        text-shadow: .03em 0 #fff,-.03em 0 #fff,0 .03em #fff,0 -.03em #fff,.06em 0 #fff,-.06em 0 #fff,.09em 0 #fff,-.09em 0 #fff,.12em 0 #fff,-.12em 0 #fff,.15em 0 #fff,-.15em 0 #fff;
        background-position: 0 95%,100% 95%,0 95%;
    }
    a {
        text-decoration: none;
        background-color: transparent;
    }
<div class="contents">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod <a>tempor</a> incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in <a>reprehenderit</a> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>

2

The trick is: They deactivated text-decoration and added a rather complex, very thin red background at the very bottom of the line which looks like an underline. in addition they added a white text-shadow which overlaps the red "background". Together, this looks like an interrupted underline

This is the relevant CSS rule reponsible for this effect (in addition to text-decoration: none):

.contents a {
    color: #1A1A1A;
    background: linear-gradient(#fff,#fff),linear-gradient(#fff,#fff),linear-gradient(#FF3530,#FF3530);
    background-size: .05em 1px,.05em 1px,1px 1px;
    background-repeat: no-repeat,no-repeat,repeat-x;
    text-shadow: .03em 0 #fff,-.03em 0 #fff,0 .03em #fff,0 -.03em #fff,.06em 0 #fff,-.06em 0 #fff,.09em 0 #fff,-.09em 0 #fff,.12em 0 #fff,-.12em 0 #fff,.15em 0 #fff,-.15em 0 #fff;
    background-position: 0 95%,100% 95%,0 95%;
}
1

Update: It's default now

As of March 2022, it's the default for underlines to skip descenders in dominant Western scripts. That's when the last major browser (Safari) adopted text-decoration-skip-ink. It's default value is auto, which permits the browser to "interrupt underlines and overlines so that they do not touch or closely approach a glyph" as you've asked for (Mozilla). To recreate the old styling, use none.

:first-child {
  text-decoration-skip-ink: auto;
}
:last-child {
  text-decoration-skip-ink: none;
}
Please visit my <a href="https://myspace.com">MySpace</a> page. 
I no longer use <a href="https://xanga.com">Xanga</a> because it's old.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.