html - 我怎样才能使文本阻碍它的下划线 'block out' HTML/CSS 中带空格的下划线？

Question

有没有办法用 HTML/CSS 重现下面的效果:

http://i.imgur.com/ASdXb.png

基本上我想让我的链接文本“优先”并在所有穿过下划线/边框底部的字母周围屏蔽一些空白。

Answer 1

这是可以做到的，它看起来像是一个有用的 LESS mixin 的完美示例。 http://jsfiddle.net/elclanrs/r6Rmh/

p {
    display: inline-block;            
    font: bold 24px Arial;
    border-bottom: 3px solid black;
    text-shadow: -3px 0 white, 3px 0 white;
    line-height: 21px;
}