So I had a look at how Tumblr renders the line underneath links in posts, that somehow only works in Chrome. And like, just... this is amazing.

There is no margin, or border, text-decoration, or any of the standard ways that CSS provides to draw a line underneath something. Instead, the CSS in question is:

background-color: rgba(68, 68, 68, 0);
background-image: -webkit-linear-gradient(top, rgba(68, 68, 68, 0) 50%, rgba(68, 68, 68, 0.247059) 50%);
background-position: 0px 16.1000003814697px;
background-repeat: repeat-x;

This means that it asks Chrome to draw a gradient, which jumps instantly from transparency to partial opacity part way through. It then positions this gradient so that it’s displaced 16.1000003814697 pixels from the top of the < a > element.

This is the most astonishingly convoluted way to draw a line under something I can imagine. I seriously can’t imagine how they even came up with this idea, let alone what advantage it provides compared to simpler, comprehensible methods. And instead of using basic, fundamental aspects of the box model well-established in CSS, it does this... weird... thing... using a feature that hasn’t yet been introduced into the HTML standard. Then doesn’t even do the necessary copies to make it work for Firefox as well.

So this CSS simply copies Tumblr's weird incomprehensible underlining trick to work with Firefox as well.