Reid D Reid D - 1 month ago 21
CSS Question

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?

Answer

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>

Comments