CODEWITHSUNDEEP
css
Reid D
Reid D

Reputation: 63

How can I get text-decoration: underline to ignore descenders

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?

Upvotes: 6

Views: 3429

Answers (4)

Merchako
Merchako

Reputation: 899

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.

Upvotes: 2

P Varga
P Varga

Reputation: 20229

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

Upvotes: 4

Johannes
Johannes

Reputation: 67778

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%;
}

Upvotes: 2

Canilho
Canilho

Reputation: 1209

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>

Upvotes: 2

Related Questions