调整链接和下划线之间的空间低于最小值

Question

我很难在链接和下划线之间找到合适的空间（Vingårde，Dyrkning，Filosofi，Butik）。见下面的例子：

http://itu.dk/people/mbul/humlum/

就好像下划线与文本的接近程度最小。我尝试过不同的东西，其中有填充底部，但我无法让它工作。

我已经定制了一个我发现的jfiddle（http://jsfiddle.net/kHZbH/135/），所以你可以看到我的意思。我已将padding-bottom设置为-200px，但下划线不会更接近文本。

<p>This is some example text. From this page, you can <a href="#">read more example text</a>, or you can <a href="#" id="custom">visit the bookshop</a> to read example text later.</p>

#custom {
    font-size: 50px;
    border-bottom: 4px solid blue; /* Or whatever color you want */
    padding-bottom: -200px;
    text-decoration: none;
    color: red;
}

奇怪的是，如果你仔细看看jfiddle中的普通链接，下划线就在字母p的底部后面，所以在小尺寸链接中，可以得到接近文本的下划线 - 但只是不是大尺寸链接？

有什么建议吗？